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Preface 


Once upon a time not too long ago, I was trying to find information about 
something new called HTML. I knew it was a programming language for pub- 
lishing documents on the World Wide Web, a graphical part of the Internet. 
And I knew I had to learn Web programming to keep up with the changes in the 
publishing industry. 


I asked around and found a few facts. First, I found out that there wasn’t a good 
book available. Perhaps you've had the same experience. Surfing the Web for 
documentation. Scouring bookstore shelves for a simple HTML book. 


Eventually I found what I needed on the Web and on bookstore shelves. 
However, what I found was not clear or concise. I could see that HTML program- 
ming was easy to understand but that the documentation wasn’t. I just wanted 
to know what code to type and how to use it. What are the limitations? How do 
I specify type, control graphic design, insert images, and link files? And I wanted 
it in a book that was easy to use. 


So I found the simple answers and put them in the first edition of this book. In 
this edition I have included new tags that are now a part of the HTML language. 


Each set of facing pages presents one topic. I include some information on post- 
ing pages, where to find servers, how to structure documents, and a few design 
tips, but the bulk of the book focuses on the code. You can go pretty far on the 
basics because there isn’t much more to HTML programming than the basics. 


This book is for anyone who wants to get started with HTML and for people 
who want a quick reference at their side. You don’t need a week to learn HTML 
basics. Just an hour, this book, a word processor, and a browser will do. 


Buy this book if you want to 
@ Understand how Web pages are created 
Find the simple facts about Web programming 
Create Web pages of your own 
Have a quick reference to check as you program 


a 

a 

a 

@ Learn more programming techniques 

@ Make the transition from desktop publishing to online publishing 
a 


Establish a presence on the Internet for your business 
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@ Get informed before hiring an Internet programmer 
@ Spend less than what other books cost 


If you want a deeper understanding of HTML programming and the World Wide 
Web after you read this book, Que has published several related books that 
should be of interest: 


Special Edition Using HTML 3.2, Third Edition 

Special Edition Using Netscape 3 

Special Edition Using the Internet, Third Edition 
Special Edition Using MS Internet Explorer 3 

Running a Perfect Web Site, Second Edition 

Platinum Edition, Using HTML 3.2, Java 1.1, and CGI 


All these books should be available at your local bookstore. You can also 
find information about these and other Que books on the Web at 
http://www.quecorp.com, the Macmillan Information SuperLibrary. 


Dean Scharf 





What Is HTML? 


HTML is a mark-up, or formatting, language. In fact, HTML stands for Hypertext 
Markup Language. You mark up text files with HTML tags so that they can be 
read over a network or locally on your computer by browsing software. Tags are 
pieces of code surrounded by the symbols < and >. Browsers read tags when for- 
matting HTML files on your screen. Documents available on the World Wide 
Web are HTML files. 


HTML does not describe a page the way some computer languages do. Some lan- 
guages actually describe every graphic element and its position on the page. 
This includes fonts, point sizes, screen values, line weights, and so on. In con- 
trast, HTML describes neither text or graphic elements nor their exact place- 
ment. HTML only tags the content of the file with certain attributes that are 
later defined by the browser used to view the file. It is like a person who writes a 
memo by hand and puts small comments before certain sections of the memo 
to indicate to the secretary specific things to do—for example, “new paragraph 
here,” “new page,” “please highlight this sentence,” and so on. 


HTML tags attribute type styles, insert graphics, sound, and video files in the 
text, and create hypertext links and forms. Hypertext is the most important capa- 
bility of the HTML language. It means that any piece of text or graphic can link 
to another HTML document. 


The official HTML language is a specific set of tags that all browsers should 
interpret. Some browsers are capable of interpreting additional tags outside the 
standard. New tags are added to the standard set over time. 


Mosaic, one of the first browsers, was developed by the National Center for 
Supercomputing Applications (NSCA) at the University of Illinois. It combined 
color graphics with HTML text capabilities for the first time. These days 
Netscape Navigator, developed by people formerly at NSCA, has become the 
browser of choice because of its speed and enhanced features. Microsoft’s 


Internet Explorer is gaining ground fast. Some access providers have developed 
their own browsers. 
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|sHTML> 

<HEAD><TITLE> What is HTML?</TITLE></HEAD> 

<BODY> 

<H1>What is HTML?</H1> 

HTML is a mark up, or formatting language. In fact, HTML means <B>HyperText 

Markup Language</B>. You mark up text files with HTML tags so they can be read 

over a network, or locally on your computer, by browsing softwere. Documents 

available on the World Wide Web are HTML files. 

<P> 


HTML does not describe a page the way <I>Postscnpt</l> does. <I>Postscnpt</l> 
actually describes every graphic elernent and its position on the page. This includes 
fonts, point sizes, screen values, line weights, etc. In contrast, HTML describes 
neither text or graphic elements nor their placement. HTML only tags the content of 
the file with certain attributes that are later defined by the browser used to view the 
file. 

<P> 

HTML tags attribute type styles, insert graphics, sound and video files in the text and 
create <A HREF="links.huml">hypertext links</A> and forms. Hypertext is the most 
importent capability of the HTML language. It means that any piece of text or graphic 
can link to another HTML document. 

<P> 

The official HTML language is a specific set of tags that all browsers should interpret. 
Some browsers are capable of interpreting additional tags outside the standard. New 
tags are added to the standard set over time. 

</BODY> 

</HTML> 








How HTML Works on the Web 


Like e-mail, FTP, Gopher, and other Internet services, the World Wide Web 
requires an interconnected complex of hardware running specialized 
software to work on the Internet. 









The browser on your computer 
sends requests for HTML files 
to remote servers on the 
Internet by using addresses 
called UALs (Uniform 
Resource Locators). When the 
data returns to your computer, 
the browser interprets the 
HTML tags and displays the 
formatted text along with any 
graphics. 


—— 





| 





ae The Internet access provider, 
often a Web server itself, 


routes requests from your com- 
puter to other servers on the 
Internet. It also transmits the 
HTML file back to you. 


A dial-up modem or high- 
speed data transmission line 
connects your computer to an 
Internet access provider. 
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The Internet is a worldwide network of servers. Your request | 
bounces from server to server until the URL address of the HTML | 
file you want is found. The data then returns over the Internet to 
your computer. 








The Web server holds the 
HTML file you are looking for 
along with any other files 
needed by the file, including 
graphic, sound, and video files 
inserted in it and associated 
programs known as gateway 
scripts. Gateway scripts are 
programs running on the server 
that process data. 





How Browsers Work 


Browsers send requests and receive the data needed to display the HTML page 
on your screen. This includes the HTML file itself plus all the graphic, sound, 
and video files mentioned in it. Once the data is retrieved, the browser formats 
the type as indicated by the HTML tags and displays it with the graphics files 
on your computer screen. 


When you click a hypertext link, a new request to retrieve another file is sent 
out over the Internet. Most browsers perform other functions, such as sending 
e-mail or downloading files via FTP. Helper applications on your computer, plug- 
ins, and enhancements like Java enable the browser to play sound and video 
inserted in the HTML file. 


The fonts installed on your computer and the display preferences in the browser 
you use determine how text is formatted. 


Z 07861-04.htmi ] HTML files look like a mix of 
(fines) 2 i __(eiziy) (eis) ole (S) fees i stext and coding when viewed 

| Worrmat_____ 4 =) CSS . F 

Liens 1G esis) CAS tie) Ciel) gel) ae in a word processing program. 


|eHTML> The code is comprised of 


<HEAD><TITLE>A I, Frnedman Mail Order Art and Office Supplies Home i e 
See eane P symbols and acronyms inter 
<BODY> i i 
<IMG ALIGN=TOP SRC="Fredman gif'> spersed with text and file 
<H1>Art and Office Supplies Catelog-</H1> titles. 
<P> 
ci 4 catagory below to find whet you need and just fill out the form to place your 
order, 
<P> 
<A HREF="Furniture huml">Fumiture & Presentation</A><BR> 

“Computer html">Computer Graphics & Reprographics</A><BR> 
<A HREF="Art html">Traditionsl Art Materiels</A><BR> 

fice html">Office Supphies</A><BR> 

<A HREF ="Index html">Index</A><BR> 
<P> 
<A HREF ="Specials html">This Week's Specials </A><BR> 
<A HREF="Order html">Place an Order</A><BR> 
<P> 
2 HREF ="NYArts html">Table of Contents</A><BR> 
<P> 
<A HREF ="Furiture hunl"><IMG ALIGN=TOP SRC="Fumitures.gif'></A> 
<A HREF ="Computer html"><IMG ALIGN=-TOP SRC="Computer.gif'></A> 
<A HREF="Arthunl"><IMG ALIGN=TOP SRC="Art gif'></A> 
eo HREF ="Order html"><IMG ALIGN=TOP SRC="Order. gif'></A> 
<P> 
<B>AI, Fnedman<BR></B> 
44 w 18th Street<BR> 
New York, New York 10011<BR> ; 
<P> 
212-243-9000 Phone<BR> 
212-929-7320 Fax<BR> 
Fredman@Anynet.com 
<P> 














A. |. Friedman 


Place an Order 


Mall ve 





-G——— Netscape: A. |. Friedman Mail Order Art and Office Supplies Home Page 








Back [Forward] Home Edit Reload | images | Print | Find 


Location: |file:///Macintosh%20HD /Dean's /HTML/HTML®20F tles B203d% 20E dtion /!S2OHTMLB2OF ilesB203¢ dBZ0E 














A.|. Friedman 


Art and Office Supplies Catalog 


Choose a catagory below to find what you need and just fill out the form to place your order 


Place an Order 


A.1. Friedman 
44 w 18th Street 
New York, New York 10011 





212-243-9000 Phone 
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Graphics, sound, or video 
files are not actually part of 
the HTML document, however, 
their titles are used. The file 
title and location (also called 
a path) tell the browser what 
to retrieve and where to find 

it (see page 86). 


The browser combines the for- 
matted text with inline graphics 
and highlights the linked ele- 
ments. It displays them on your 
screen as a graphical point- 
and-click interface. 





Different Browsers 


All browsers perform the same basic functions: they send requests to remote 
Web servers, receive the data, and display formatted HTML files on your com- 
puter screen. But that’s where the similarity ends. Some don’t do anything else. 
In fact, they don’t even display proportional fonts or graphics. These are called 
non-graphical browsers. Others have features beyond the basics. They display 
graphics and forms, send e-mail, download files via FTP, and play sound and 
video. These are called graphical browsers. 


You must use a browser written for your operating system. Browsers are avail- 
able for all major systems. You can download a browser at one of the FTP sites 
listed in the following table. (some of these browsers are free; others need to be 
paid for if you continue to use them.) 


Netscape: The Nasdaq Stock Market Home Page - Reload Often Graphical browsers format text 


[zai] [Retoad [mages od | [see ] with proportional fonts. They 


Location: [http://www nasdaq.com/ insert inline graphics and 
Joes nana Ne vasa this se highlight hypertext links in 
Composite Inlex Total Share Voluae [= color. The browser displays all 


1266.32 +5.34 A 613,234,200 a 
| ae i | AS 5 yay the text and graphic elements 
eae a eae on your screen in a point-and- 


ae Click interface. 
5 = 
Home” nnd diate | date | ania i 100. pai Br a 
Deen cu Bice ty 


Dec, 17, 96 - The Nasdaq Stock Market Closed Up 5.34 





Advanced - 1,742 Declined - 2,291 Unehaaged - 1,732 ‘Hew Highs - 64 Hew Lows - 165 


Nasdaq Composite +5.34 A Nasdaq-100 Index +11.17 & 
28 





ry 
2:08 jt 18:68 12:88 
Daily Nasdaq Composite Index Value and Vohane as of Dec. 17, 96 
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FTP Sites for Web Browsers 
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Browser _ Platforms URL or Directory 
Supported FTP Address 
Netscape Windows, Macintosh, ftp.netscape.com /pub 
UNIX http://home.net- 
scape.com 
Mosaic Windows, Macintosh, ftp.ncsa.uiuc.edu /Web/Mosaic 
UNIX 
DOS Lynx DOS ftp2.cc.ukans.edu  /pub/WWW/DosLynx 
Lynx UNIX sunsite.unc.edu /pub/packages/ 
infosystems/WWW/ 
clients/lynx 
Microsoft Windows, Macintosh http://www. 
Internet microsoft.com/ie/ 
Explorer 


Non-graphical browsers usual- 
ly display text with mono- 
spaced fonts. They substitute 
alternate text for inline 
graphics. 


SSS od 


UEST NETWORK SERVICES PAGE 


many links to various remote services. 
st Network Services and their employees 
tent, reliability or availability of 


n advertise your company and products on 


ee 
around the world 
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What’s Out There? 


A great variety of information, products, and services are available on the Web. 
Sources range from government to industry, from commerce to colleges, and 
from publishers to research institutes. 


If the source is the United States government, the information—whether text, 
sound, video, or imagery—is public domain. You can use it any way you want 
(because our tax dollars paid for it in the first place). This doesn’t apply to 
everything across the board, however, because some information may have 
been privately funded but made available through government sources by spe- 
cial arrangement. Files should have information to clarify possible uses. Check 


with the agency making the material available if you are unsure of its public 
domain status. 


Lots of free software and support is available on the Web. Some of it is product 
specific and supplied by individual hardware manufacturers. 















= Netscape: CNAM = Many Web sites offer images 


for viewing and downloading. 
Be careful, copyright restric- 
tions may apply. 















Conservatoire National des 
Arts et Métiers (National 


Conservatory of Arts and 
CONSERVAIONRE Crafts) 


NATEONAL 
D FS ®ekb9S | Oui, nous avons une page d'accueil en frengais. 


Fi MFTTERS | Welcome on the CNAM server, in Paris, France (you don't 
know Pans?). You cen come here via the subway. 








Do you want to know = ac a Select ee 














Have a visit to the Musée des Arts et Métiers, (Muse 
of technology (pictures and texts in French) 












eam 


eS 


ModelNwmber[>— SSS (type at least the first 3 characters) 


Products can be purchased 
over the Web. Be aware that 
credit card information 
transferred over the Web 
may not be secure (you must 
have a browser that supports 
transfer of confidential 
information). 


Click here for the 


INSIDER PICKS 
OF THE WEEK 


Departments 


" ‘THE OFFICE SPACE 
© oftice Equipment 
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Netscape: National Institutes of Health (NIM) 5 Some information on the Web 
a ie Ie) is highly technical, relating to 


Location: [itp 77orww nh gov ] He 
specific areas of research. 


National Institutes 
of Health 




















ms 






Cant find it? Try 
What's New -~ The latest info 
home page 











major additions to the central NIH 





Welcome to NIH 
‘Aa overnew and introduction to NIH including an employee directory and maps 
of the NIH "campus" in Bethesda, Maryland 



























News and Events 
The NIH Calendar of Events, precs releases, special reports, and employment 
information 


his 








¢ NIH health resources such as CancerNet, AIDS 
information, Clinical Alerts, the Way 
Information Index (a subject-worff ry 

investigation at NIH) 




















CA eaccann 


Pei) 


be J > 
Large corporations are setting Age 
up Web sites to promote their seo Vee mee eM nel ee (et Cor) 
products and provide customer here j Mamta 


service. F Pesce echo eae 


2 Business & Technical Computing 





2 Printing & Imaging 
‘ i 2 Networking 












ard] Home Reload | images | Print | Find 
Location: [http://www mit.edu 6001 /calisign 


This is a searchable index Enter search keywords 





Enter the amateur radio callsign you wish 
to look up 


eg. "NIDPU" 


Automated indexes help you 
search databases and locate 
information. 






Collsign data ere provided by the United States Federal Communications Cormumission and the 
database service is provided by the University of Arkansas at Little Rock Amateur Radio Club 


Goteway written by Mark Fichin 


13 





What You Need To Learn 


There are four criteria you need to fulfill to become an HTML electronic pub- 
lisher: you need to get the right hardware and software; learn the HTML pro- 
gramming language; understand how to structure Web documents; and find a 
server to post your pages on. Don’t panic. None of these are rocket science. 


hoa ieee OO 07661-ozntm & —=s 
_=———s fee Jee Je S a) ee 
l | [ecmat —_____)(s) (me } = =e) (els! Celt Tey Galea) ae 
+ — 4 i 
4 








\sHTML> 

<HEAD> <TITLE>Whotis HTML? </TITLE> <HEAD> 

<BODY> 

<Hi>Whotis HTML? </Hi1> 

HTML is « mark up, or formating language. In fact, HTML means <B>HypesText 
Markup Language</B>. You mask up text files with HTML tage so they can be read 
aver e network, or locally on your computer, by browsing software. Documents 
available on the World Wide Web are HTML files 

<P> 

HTML does not describe a page the way <I>Postecriptefl> does. <I>Postscrpte/> 
actually decenbes every graphic element and its position on the page. This indudes 
fonts, point sizes, screen values, line weights, etc In contrast, HTML descabes 
neither text or graphic elements nor ther placement. HTML only tags the content of 
the file with certean attnbutes thot are leter defined by the browser used to view the 
file 

<P> 

HTML tags otunbure type styles, insert graphics, sound and video files in the text and 
create <A HREF "links honl" >hypertext links-</A> and forms, Hypertextis the most 








If you have a computer and you are on the Net anscnekinsaaacee ete eee 
; e 
already, you probably have this area covered. He Desetint nespyemmeteeasiee tere ater 


you intend to include graphics, sound, and video Cag at ded the tndard set over ane 


</ATML> 


in your documents, you will need software to cre- Fs 
ate or manipulate these files (see page 16). 








Normal 


If you know how to type, you can program using 
HTML. The catch is you just have to know what 
to type (see pages 20-145). 
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a 
Sack 





Ranta [ie 7 rasrnnotnaore recuse 








Location: [Fie // /Macmtosh@ ZOHO /Projects20 


Birds 


Some copy about birds and peacuias Thea sof 
nas sumphubusns 








Zoo Contents 















Choose any topic below 
© Elephants 
. 





© Peneune 
o Tune 





There are only two choices when structuring 
documents: linear, like a book, and non-linear, 
like a road map (see pages 146-151). Use linear 
structures to control the order in which informa- 
tion is viewed, for example, a lesson. Use 
non-linear structures (as shown here) to allow 

a person to determine the order in which they 
view the information from the possibilities you 
provide, for example, a table of contents. 








= Lees) tome J Brees 

Location: [fle 77 /Macwtasn 200 /Pro ects] 
Penguins 
Some copy sbovt bude and pengune. Thea 


Rerum to captenre 


Introduction to HTML 












SSS Nets 














When you find a server to post your pages on, 
you can download your files and customize any 
gateway scripts needed. A system administrator 
can do the parts you don’t know how to complete 
(see pages 166-167). 
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What You Need To Write or Browse 


Writing for the Web and browsing it require some of the same hardware and 
software, depending on what you want to do. You can write documents that 
use text and no graphics, sound, or video. You can also browse without the 
graphics, sound, and video. It’s up to you. 


To write HTML files, you really only need a word processor, as HTML files are 
just text files. However, you may want to get HTML authoring software that is 


a2 The Computer 











| ) Sound 
_ Video 
4 
Connection 
f 
Software 
: 
| 
g ; 
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Introduction to HTML 


designed to automate some of the typing. To create or edit graphics, sound, and 
video, you need to have the appropriate hardware and software for working 


with these files. 


To browse, you need a browser program for your operating system, a connection 
to an access provider, and whatever additional hardware and software that may 
be needed to view the graphics, sound, and video files you encounter. 


Writing 
Almost any computer that runs a 
word processor will do. 


Browsing 


Processor speed and RAM are the most 
important factors no matter what platform 
you choose. Buy or upgrade as much as you 
can afford. 








Sound board and audio software only 
if you intend to create and edit files. 


Sound board and audio software only if you 
intend to listen to sound when included in 
files. 





Video board and software only if you 
intend to create and edit files. 


Video board will improve speed but may 
not be needed to view video. 





No connection is needed to write or 
post files to a server; you can send 
them to the server on disk. Often a 
large project with many graphics 

is impractical to move any 

other way. 


You must have a connection to an Internet 
access provider (the faster the better). 





Any word processing software that 
saves text files will do for HTML 
programming, or use HTML authoring 
software. To check your files locally you 
need a browser. 


Any graphic or non-graphical 
browser for your platform. Sound and 
video players if you intend to view these. 
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Connections 


You connect to the Internet via a data transmission line. Lines vary in speed and 
cost: the faster the line the more expensive the cost. Pick one that fits your bud- 
get and needs. The chart on this page lists options in increasing speed and 
expense. Localtalk and Ethernet are included in the chart for comparison 
because they do not connect to the Internet directly but are used in local area 
networks. Transmission speed is limited by the slowest link between your com- 
puter and the Internet. You need to match the speed of your computer with the 
speed of connection and balance that against needed throughput. 


Check with the network administrator where you work or study before you spend 
any money. The equipment and connections you need may already be available to 
you. Most large corporations, government agencies, research institutes, and colleges 


Type 


Modem 14.4 Kbps, 
dial-up connection 
to access provider 


Speed 


14.4 Kbps, about 1.5 pages of 
text 


User 


individual at home or in 
the office, used for all 
Internet services 





Modem 28.8 Kbps, 
dial-up connection 
to access provider 


28.8 Kbps, about 3 pages of 
text 


individual at home or in 
the office, used for all 
Internet services 





Switch 56, dedicated 
line, connected to point 
of presence 


ISDN, dedicated line, 
connected to point of 
presence 


56 Kbps, about 6 pages of text 


64 Kbps, about 8 pages of text 


corporations 


corporations 
home use in some areas 





Localtalk, local area 
network, must connect 
to point of presence 


230 Kbps, about 25 pages of 
text 


corporations, businesses, 
schools 





T1, dedicated line, 
connected to point 
of presence 


1.54 Mbps, a short book 


corporations, research 
institutes, universities 





Ethernet, local area 
network, must connect 
to point of presence 


10 Mbps, a long book 





T3, dedicated line, 
connected to point 
of presence 


4S Mbps, the complete works 
of Shakespeare 


corporations, research 
institutes, universities 


corporations, research 
institutes, universities 





FDDI, dedicated line, 
connected to point 
of presence 


100 Mbps, the Oxford English 
Dictionary 


corporations, research 
institutes, universities 


Ss. 
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Introduction to HTML 


and universities have high-speed lines connecting their network to the Internet. 
Ask the network administrator for information about how to use them. 


A simple modem plugged into your telephone jack is the least expensive connec- 
tion method, but it is also the slowest. It is easy to purchase and install. You can 


set up the equipment yourself and have the monthly Internet access fees 
charged to a credit card. If you can only afford a dial-up connection to an 
Internet access provider, get a fast modem. Spending a little more for the fastest 
modem will save you money in the long run. A faster modem means quicker 
data transfers, shorter connect times, and lower bills. 


High-end dedicated lines are expensive but fast. Speed allows not only faster 
transmission time but also more people to work at the same time. Large corpora- 
tions and universities can afford a dedicated line like a T1 connection. These 
involve special equipment and software between your network and the 
Internet’s closest point of presence. 


Provider 


purchased by user 


Cost 


local call rates of your 
telephone company 








purchased by user 


local telecommunications 
company 


local telecommunications 
company 


local call rates of your 
telephone company 





dependent on distance, 
charged per mile per month 


dependent on distance, 
charged per mile per month 








corporations, businesses, 
schools 


cost of installation 








corporations, research 
institutes, universities, 
government 


dependent on distance, 
charged per mile per month 





corporations, research 
institutes, universities, 
government 


cost of installation 





corporations, research 
institutes, universities, 
government 


dependent on distance, 
charged per mile per month 








corporations, research 
institutes, universities, 
government 


dependent on distance, 
charged per mile per month 
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Basic HTML Programming Elements 


HTML documents consist of two basic parts: the head and the body. Both the 
head and the body use pieces of code called tags. Tags style text, link files, 
embed graphics, insert tables, and create forms that are used for gathering infor- 
mation from the user. 


The standard way to type tags is in ALL CAPS. However, most browsers will 
work with tags typed in ALL CAPS or lower case or a Mix Of The Two. I have 
used all caps in this book. 


Some tags can be used by themselves, like <P>, the tag that starts a paragraph. 
Other tags must be used together; for example, to style a first level heading 
requires opening and closing tags, <H1> and </H1>. Closing tags contain a slash. 
Tags for linking files and creating forms require additional parts (also called 
arguments) to work properly. Tags for graphics also require additional parts like 
the file name and directions for alignment. 


Each document should 


Start with the <HTML> tag. ele SS Ses eee ED) ode) ae 1 
If you are using an HTML Pe BE 


editor, the files may not 
include this tag. 


<IMG ALIGN=TOP SRC="Elements gif'> 
P; 


<P> 
a The <HEAD> tag must be at HTML documents consist of two basic parts; the head and the body. Both the head 
and the body use pieces of code called tags. Tags style text, link files, imbed graphics 


the beginning of your doc- and create forms 
<P> 
ument. Put the <TITLE> tag Some tags can be used all by themselves, like the &ltPé&gt; tag that ends a 
peragraph. Other tags must be used together. For example, to style a first level 
between the <HEAD> and heading requires an opening and dosing tag &ltH1a&gr, and &lt/H1égt, Closing 
; . tags contein a slash. Tags for linking files and creating forms require additional parts 
</HEAD> tags which sur (leo called arguments) to wrk propel 


round the prologue of the 
file. Type the text you 
want to appear in the title 
bar of the browser when 
the file is viewed between 





the <TITLE> and </TITLE> 
tags. 5 
g Place the rest of your 
document between the Gy The <H1> and </H1>tags [End every document with 
<BODY> and </BODY> tags. surround the text that </HTML>. 
appears in the first level 
heading style. 
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Writing HTML 


SSS netscape: Basic HTML Programming Elements 


Cie [ros [rot [Fe] 
Sl ee 


Basic Elements 


HTML documents consist of two basic parts; the head and the body. Both the head and the body 
use pieces of code called tags. Tags style text, link files, imbed graphics and create forms 


Some tags can be used all by themselves, like the <P> tag that ends a paragraph. Other tags 
must be used together, For example, to style a first level heading requires an opening and closing 
tag, <H1> and </H1>. Closing tags contam 4 slash. Tags for linking files and creating forms 
require additional parts (also called arguments) to work properly. 
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Relative Type Styles 


One way to style type is with relative tags. These include six heading tags (H1 
through H6) and tags like strong and emphasis. Each tag indicates a style set in 
the browser preferences. Styles vary from browser to browser but generally have 
the same characteristics (see page 10). 


Heading styles H1 through H6 start large and bold and gradually lessen in size 
and weight. HS and H6 style preferences can be very different from those in the 
browser you use. You may get a result you don’t like, so it is a good idea to stay 
away from them. 


H1 is the largest and boldest; use it for the most important type on your page. 
H2 is smaller and less bold; use it for sub-heads. H3 is smaller and carries less 

weight than H1 or H2; use it when you need to have a third level of heading. 

Use H4, HS, and H6 sparingly. You do not want your page to look like an out- 
line (unless, of course, it is). 


Address is often italic and is meant for e-mail, phone numbers, and postal 
addresses. The tag for address is <ADDRESS>. 


Citation is meant for quoting text, and its tag is <CITE>. 


Emphasis and strong draw the eye to the type, usually by making it bold or italic. 
These are marked with the <EM> and <STRONG> tags. 


Code, sample and keyboard format type in a monospaced font, usually Courier. 
These are marked with the <CODE>, <SAMP>, and <KBD> tags. 


Other relative tags include <BIG>; <SMALL>; <SUP>, for superscripts; and 
<SUB> for subscripts. 


If you do not indicate a type style, the text is formatted in plain type. All of 
these type-style tags are used in pairs. The closing tags for heading styles insert 

a paragraph break automatically. Other text styles, often used within copy, do 

not. 


<H1>First level heading</H1> Gy Start with an opening tag 
| | in front of the text. 


EZ Put the text you want to 
style between the tags. 


EX) End with a closing tag 
after the text. 
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07861 -11.htmi 
Jie 827) es) Guest @) (== 


Primes _ J SB 
[Rem (SS) FEE) SS) bls Bil) Gest) a 4 
ce Sg a a 











<HEAD><TITLE>Relative Type Styles Using HTML</TITLE></HEAD> 




























vi 8 
<H3>Third level heading</H3> 
<H4>F ourth level heading</H4> 
<H5>Fifth level heading</H5> 
<H6>Sixth level heading</H6> 
<STRONG>Strong</STRONG><P> 
<EM>Emphasis</EM><P> 
<CODE>Code</CODE><P> 
<SAMP>Sample</SAMP><P> 
<KBD>Keyboard</KBD><P> 
<CITE>Citation</CITE><P> 
<ADDRESS>Address</ADDRESS><P> 
<BIG>Big</BIG><P> 
<SMALL>Small</SMALL><P> 
Subsenpt<SUB>1</SUB><P> 
Superscript<SUP>2</SUP> 

IDY> 
</HTML> 





Location: | file :// /Macintosh%S20HD /Dean's /HTML /HTML%20F iles% 203rd®B20E dtion / !SZOHTML B20) 


First level heading 






















Second level heading 





Thrid level heading 
Fourth level heading 
Fifth level heading 
Sixth level heading 
Strong 
Emphasis 
Code 
Sample 
Keyboard 


Citation 





Address 


Subsenpt, 


Superscript 
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Horizontal Alignment of Text and 
Graphics 


You can control horizontal alignment of text and graphics through HTML pro- 
gramming. Unless you specify alignment, all elements in a document will align 
left and have a ragged right margin. This looks fine for many documents. 
However, you may want to design a more distinctive page by choosing left, 
right, or centered alignment. 


Long paragraphs of centered copy can be difficult to read, but centering adds a 
certain look that may fit the character of the Web pages you design. 


Some browsers also support <Left> and <Right> tags that work the same way as 
<Center>. However, more recent releases of browser software recognize Align= 
instead of <Left> and <Right>. Use Align= inside paragraph, <P>, and heading 
tags, <H1>. 


1 2 3 4 
| a ee ee AS oes esl 
<P Align=Right>Typesetters call this flush right rag left.</P> 


<H1 Align=Center>A Centered Heading</H1> 
=a hore 
5 6 7 8 


<Center> 


Centered paragraphs of copy can be difficult to read. > 2 


</Center> 


ke Start with the <P tag in qa End with a closing tag to Put text, graphics, and 


front of the text. return to default alignment. other elements between 
the tags. 

7 Put the Aiign argument EM start with any heading 

after the <P tag. Put the style tag in front of the 8 | End with a closing tag to 

alignment option after the text. This will also add a return to default align- 

= Symbol and close the line space. ment and text style. 

tag with the > symbol. 

Ga Put the Align argument after oO Put text, graphics, and 

Hi Put text, graphics, and the heading style tag. Put other HTML elements 

other elements between the alignment option after between the <Center> and 

the tags. the = symbol and close the </Center> tags. 

tag with the > symbol. 
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ey 

9219 G2 Gy GH Gas 

=e aes) Cae) Ge Crbold ti) a 
eet es ee ee, Se oie, eS ee a ee Sg oC 











































|sHTML> 
<HEAD><TITLE>Honzontal alignment</TITLE></HEAD> 

<BODY> 

<H1>Horizontel alignment of text and graphics 

</H1> 

<P> 

<Center> 

You can control horizontal alignment of text and graphics through HTML 
programming. Unless you specify alignment, all elements in a document will elign left 
and have a ragged right margin. This looks fine for many documents. However, you 
mey want to design 4 more distinctive page by choosing left, right or centered 
alignment, Centered paragraphs of copy can be difficult to read if the copy goes on to 
long. But it also adds a certain look to the text that may work for the character of the 
web pages you are designing. Put text, graphics and other HTML elements between 
the two Center tags. 

<Center> 

<P Aline. eft>Typesetters call this flush left rag nght </P> 

‘Typesetters call this centered lines.</P> 

tights Typesetters call this flush night rag left. </P> 

<H1 ots =Center>A Centered Heading</H1> 

aa 









pa eee ali 


Location: | file :// /Macintosh%20HD /Dean's /HTML/HTMLS20F iles%203rd%20Edtion /!9%2OHTML%20} 


Horizontal alignment of text and 
graphics 


You can control horizontel alignment of text and graphics through HTML programming. Unless 
you specify alignment, ell elements in a document wall align left and have a ragged night margin. 
This looks fine for many documents. However, you may went to design a more distinctive page 
by choosing left, right or centered slignment. Centered paragraphs of copy can be difficult to read 
if the copy goes onto long. Butit also adds a certain look to the text thet may work for the 
character of the web pages you are designing. Put text, graphics and other H’ elements 
between the two Center tags, 





Typesetters call this flush left rag ight. 





Typesetters call this centered lines. 


A Centered Heading 





Font Sizes 


One way to change text size displayed by the browser is by using heading styles 
(see page 22). Another way is by setting the basefont size or the font size. 


<Basefont> affects the default size used for text. Heading styles override base- 
font size. The default basefont size is 3 unless you specify a different one. This 
is very readable for most documents. Basefont sizes range from 1 to 7. 


<Font> affects the size used for specific pieces of text. Heading styles override 
font size. Font sizes range from 1 to 7. Setting the font size and basefont size to 
the same number result in the same size type. 


Setting the font size with a + or - symbol results in sizes relative to the current 
basefont size. You cannot have the font and basefont size add up to more than 
7 or less than 1. For example, if the basefont size is set at 3, you can only add 4 
or subtract 2 using font size. 


1 3 
ee ee 
<Basefont eee is a larger than normal basefont size. 


Se ee Z 
<Font Size=7>This is a large font size. 


5 
<Font Size=+1>This adds 1 to the basefont size. 
So 


7 89 
J Start with the <Basefont [Gy Close the tag with the > 
Size = tag. symbol. 
Put the size atter the = Start with the <Font Size- 
symbol. Set it from 1 to 7. tag. 


EE) Close the tag with the > EE] Put the relative size after 
symbol. the = symbol. 


Start with the <Font Size- EJ Close the tag with the > 
tag. symbol. 


[E] Put the size after the - 
symbol. Set it from 1 to 7. 
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07861-13.ntml 
a; 






|sHTML> 
<HEAD><TITLE>F ont size</TITLE></HEAD> 

<BODY> 

<H1>F ont size</H1> 

<P> 

One way to change text size displayed by the browser is by using heading styles (see 
page 00). Another way is by setting the basefont size or the font size. 
<P> 





This is normal basefont size 
<x 





This is a larger than normel basefont size. 
<P> 

<Font Size=+1>This adds 1 to the current basefont size. 
<P> 

<Font Size=7>Seven is a large font size. 

</BODY> 

</HTML> 





Netscape: Font size 


Location: file :/ / /Macintosh%S20HD /Dean's /HTML/HTML%20F iles %S203rd%20Edtion /!%SZOHTMLS20} 


Font size 


One way to change text size displayed by the browser is by using heading styles (see page 00) 
Another way is by setting the basefont size or the font size 


This is normal basefont size 


This is a larger than normal basefont size 


This adds 1 to the current basefont size. 








Seven is a large font size. 





Specifying Typefaces and Color 


When styling text with fixed or relative type style tags (see pages 22 and 30), 
browsers display the text in the default typeface. The default is set in the user 
preferences. You can specify other typefaces and control text color by including 
the FACE= and COLOR= arguments within the <FONT tag. 


There is one big problem when specifying fonts. The fonts you choose must be 
installed on the user's system, not just yours. If they aren't, the browser will still 
display the text in the default typeface. Because there is no way to know if the 
fonts are available on the user’s system, you have a choice of just two approach- 
es. You can either choose one typeface that is standard across most operating 
systems or you can specify one typeface for each operating system by listing 
several typefaces, separated by commas. For example, <FONT FACE=" Arial, 
Helvetica, Geneva, Swiss, Sans Serif"> should be able to find at least one of 
these san serif fonts installed on most Windows or Macintosh systems. The 
browser uses the first font it finds installed. 


You set text colors in the <FONT tag with the COLOR= argument. Color is a mix 
of red, green, and blue in hexadecimal notation. Black is 000000—that is, no 
color. White is ffffff, or full color. Experiment to find combinations you like. 
You also can specify color by name instead of number. Common colors like 
green, yellow, and red have been given numeric equivalents (see page 200). 


2 3 
pot es 
<FONT FACE="HELVETICA" COLOR="BLUE"> 
abcdefg —4 





</FONT> 5 


Ei] Start with the <FONT tag. (J Include the COLOR- argu- 


include the FACE- argu- 


ment within the <FONT tag 
if you want to specify a 
typeface. Put the name of 
the typeface between the 
quote marks. 


ment within the <FONT tag 
if you want to specify a 
color. Put the name of the 
color or the hexadecimal 
notation between the 
quote marks. 


J Putall the text between | 


the opening <FONT> tag 
and the closing </FONT> 
tag. 


End with the closing 
</FONT> tag to return to 
the default text style. 





Writing HTML 












oa ing Se 


- 





</EONT> 
is setin HELVETCA, a large size and in BLUE 
<P> 


This 

<FONT FACE="SYMBOL" SIZE=7 COLOR="RED"> 
abcdefs 

</FONT> 

is set in the SYMBOL FONT, a large size and in RED. 
<P> 


This 

<FONT FACE="TIMES" SIZE=7 COLOR="GREEN"> 
sbedefj 

</FONT> 

is setin TIMES, a large size and in GREEN. 

</BODY> 

</HTML> 




















| aS 4 ing Tl ea Face re Color 

| Location: | file :// /Macintosh3S20HD /Dean's /HTML/HTML®20F iles S203rdB20Edtios 2OHTML®:) 
| 

| 


is setin HELVETCA, a lerge size and in BLUE 





> 6 
This (ee Byo ce py is setin the SYMBOL FONT, a large size and in RED 


This abcdefg is set in TIMES, a large size and in GREEN. 











[Papa es ee IR nS Ae eS Pa 
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Fixed Type Styles 


One way to style type is with fixed tags. Unlike relative style tags for heading 
levels or emphasis, each of these tags indicates a type style that does not vary 
from browser to browser. 


If you do not indicate any type style, the text is formatted in plain type. 


Blink is an unusual style. It makes text alternate between positive and negative. 
Black text becomes white text on a strip of black background. This can be 
annoying but effective in drawing attention to specific elements. 


The various fixed type styles and their tags are: 














Style Tag 
Bold <B> 
Italic <I> 
Underscore <U> 
Typewriter <TT> 
Strikeout <S> 
Blink (Navigator only) <BLINK> 


Start with an opening tag 


1 3 
in front of the text. 


[Put the text you want to 
<B>Bold</B> word. style between the tags. 


Ey End with a closing tag 
2 after the text. 
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Writing HTML 


|sHTML> 

<HEAD><TITLE>Fixed type styles</TITLE></HEAD> 

<BODY> 

If youneed ef<B-Beld<iB> por in the text use the Bold tags.<P> 

If you need an <I>Ttalc=/> word in the text use the Italic tags <P> 

If youneed an <U>Underscored</U> word in the text use the Underscore tags.<P> 
Ifyou need a <TT>Typewnitten</TT> word in the text use the Typewntten tags.<P> 
Ifyou need a word thet is <S>Struck out</S> use the Strikeout tags. <P> 

If youneed a word to <Blink>Blink</Blink> word in the text use the Blink tags.<P> 
</BODY> 

</HTML> 


Netscape: Fixed type styles 


(ee [ocean] Hoe | (Reid [images [ ert | Fe) 
Lato: [ie 77 acinoeh 20D Dears PTO A0" lesan ONT] 


If youneed a[Bold}word in the text use the Bold tags. 


If you need an Jealic word in the text use the Italic tags 

If you need an Underscored word in the text use the Underscore tags. 
If you need 4 Typewritten word in the text use the Typewnitten tags. 
If youneed a word thet is Seve cut use the Strikeout tags 

If youneed a word to Blink vord in the text use the Blink tags. 
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Setting Type Styles with Internet Explorer 


Until the introduction of the <STYLE> tag, the only way to style text was with 
relative or fixed styles (see pages 22-30). Paired tags, like <H1> and </H1> or <B> 
and </B>, surround the text and change its appearance. Font size, face, and color 
can also alter the look of text. However, this requires repeatedly typing a lot of 
code throughout the file when complex styles are used alternately. Setting a type 
style, also called a style sheet, with the <STYLE> tag is an easier way to do this. 


The <STYLE> tag is not yet fully adopted by any browser. Many do not support 
it at all. The explanation below covers the two most basic ways of using the 
<STYLE> tag with Internet Explorer. Future plans call for greatly expanding this 
extension of the official HTML language. 


Setting a type style is, essentially, modifying a heading style. In other words, you 
modify any of the preset styles <H1> through <H6> with the <STYLE> tag. 
Redefine <H1> once in the <HEAD> of the file and the new <H1> style is avail- 
able just by using the paired <H1> and </H1> tags. 


You can also set a style within a heading tag by using the STYLE= argument. 
This is useful if you want to change the heading style for one instance only. This 
will effect the style of the text surrounded by that particular set of paired tags. It 
will not change the overall heading style for the rest of the document. 


1 
— 


<HEAD> 
ae 
<STYLE> 


H1 oe FONT-FAMILY:HELVETICA; COLOR:BLUE} 3 


H2 {FONT-SIZE:48pt; FONT-FAMILY:HELVETICA; COLOR:GREEN} 
4 


</STYLE> 
7 


Lee. 
</HEAD> 


<BODY> 
8 


ee 
<H1>This is type styled H1 BLUE.</H1> 
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L 
<H1 STYLE="FONT-SIZE:48pt; FONT-FAMILY: TIMES; COLOR:ORANGE">|-9 


11 


J) Start with the <HEAD> tag 


This is type styled H1 ORANGE.</H1> 
ee re ee 


Separate each attribute 


If you want to change a 


at the beginning of the with a semicolon. heading style just once, 
file. include the STYLE= argu- 
OG Close the style with the ment within the heading 

Put the <STYLE> tags </STYLE> tag. tag when used in the body 
between the <HEAD> tags of the file. 
to define a type style. Close the head with the 

</HEAD> tag. (1) Put all the type attributes 
Put the heading style you between quote marks 
want to redefine between B Use the redefined head- after the STYLE= argu- 
the paired style tags. ing tag in the body of the ment. 

file. 


QQ] Put the font attributes 
between curly brackets. 


Put the text between the 
paired heading tags. 












































|HTML> 

<HEAD> <TITLE>Setting » Type Style</TITLE> 
Y > 

H1 (FONT-SIZE 20pr, FONT-FAMILY HELVETICA; COLOR. BLUE} 
</STYLE> 


> 
<BODY> 

This is normal text m the defalut style set in the preferences 
<P> 


<H >This is type styled H1 BLUE </H1> 
<P> 
<H1 style="FONT-SIZE 48pt, FONT-FAMILY TIMES, COLOP.OPRANGE"> 





Thus is type styled H1 ORANGE. </H1> 


<H >This is type styled H1 BLUE. </H1> 
<P> 


This is normal text in the defalut style setin the preferences 
<BODY> 
</HTML> 


my Setting a Type Style i 
@@oO Asx 


Search Mail News Favorites Larger Smaller 





Refresh 


Address ~wW | | file:///LBP%20B/SettingS20Sty les html 








‘This is normal text in the defalut style set in the preferences 


This is type styled H1 BLUE. 








This is type styled Hi BLUE. 


‘This is normal text in the defalut style set in the preferences. 33 














Marquees for Internet Explorer 


Internet Explorer has a unique HTML tag for making text move across the 
screen: the <MARQUEES> tag. Any text within this tag will attract the viewer’s 
attention by scrolling across the screen. As with <BLINK> (see page 30), it can 
be annoying if used too often. 


You control various marquee characteristics with the arguments to the 
<MARQUEES tag, which are explained below. Experiment to find a balance 
between the length of message, size of type, and marquee speed so that the 
marquee is readable—not so slow that it becomes tiresome and not so fast that 
it is too hard to read as it zips past. 


HEIGHT= controls the height of the marquee, which is measured in pixels. 


WIDTH= controls the width of the marquee, which is measured in pixels or by 
percent of window size. 


HSPACE= and VSPACE= control the horizontal and vertical spaces between the 
text within the marquee and the edge of the marquee. HSPACE= and VSPACE= 
are measured in pixels. 


ALIGN= controls where the text appears in relationship to the marquee. Choose 
between TOP, MIDDLE, or BOTTOM. 


BGCOLOR= enables you to set the background color. Color is a mix of red, 
green, and blue in hexadecimal notation. You also can specify color by name 
instead of number (see page 28). 


DIRECTION= controls whether the text moves RIGHT or LEFT. 


BEHAVIORE= controls just that—how the text moves. SCROLL makes the text 
enter from one side of the screen and exit the other. SLIDE makes the text enter 
from one side of the screen and stop when it reaches the other. ALTERNATE 
makes the text bounce from one side to the other. 


LOOP= controls the number of times the text moves across the marquee. Use 
the word INFINITE if you want the marquee to continue looping as long as the ) 
file is on the screen. LOOP= does not effect SLIDE or ALTERNATE behaviors. | 


SCROLLAMOUNTS= controls how far the text steps each time it moves. 
SCROLLAMOUNT is measured in pixels. A large SCROLLAMOUNT will cause 


the text to move in jerks and will affect readability. A small SCROLLAMOUNT 
will slow down the movement. 


SCROLLDELAY= controls how long the text waits between steps. 


SCROLLDELAY is measured in thousandths of seconds. A SCROLLDELAY=1000 
pauses one second between each step. 
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1 


MARQUEE » 


I =50 H=75% 







HSPACE=5 VSPACE=5 
ALIGN=TOP 
BGCOLOR=Yellow 
DIRECTION=LEFT LOOP=INFINITE BEHAVIOR=SCROLL 
SCROLLAMOUNT=5 SCROLLDELAY=100> 
This message will scroll from left to right across the screen. 4 


</MARQUEE>—5 


Hi] Start with the <MARQUEE EJ} Define all other marquee ZY} Put the scrolling text 


tag. characteristics you choose between the opening 
to control. See explana- <MARQUEE> and closing 
EZ Define the HEIGHT= and tions above. </MARQUEE> tags. 
WIDTH= of the marquee. 
Height and width are G})_ End with the closing 
measured in pixels or as a </MARQUEE> tag. 


percent of window width. 






y (a) (elesied A 
aie pa Cet ee gl ge 
a a cee Rl seed 















Sab <TITLE>Marquee</TITLE> 
</HEAD> 






<BODY> 
This document has a MARQUEE 
<Hi> 








<MARQUEE 
HEIGHT=50 WIDTH-75% 
HSPACE-5 VSPACE=5 
ALIGN=top 
BGCOLOR=Y' 
DIRECIION-LEET LOOP-INFINITE BEHAVIOR-SCROLL 
SCROLLAMOUNT=5SCROLLDELAY=100> 

This message will scroll from left to right across the screen. 


<IMARQUEE> 
wt: oH, 2 2 2 2 a A «& 


we Stop Refresh Howe Search Mail News Favorites Larger Smaller 


Z file ,///HTMLI2OF ilesB20Erd/ *New%2OHTMLB2OFiles%203r dB2OEdition/ Marquee] 


This document has a MARQUEE 


from left to right across the sc; 




































































% 
Z 
Z 
















Line and Paragraph Breaks 


The line break tag, <BR>, ends a line whether following text or graphics. The 
paragraph break tag, <P>, ends a line and inserts a line space that separates ele- 
ments visually. Both tags are used alone, not in pairs like the <B> and </B> tags. 


You must insert a tag when you want to break a line or end a paragraph in a 
specific place. Otherwise, the text flows to fit the width of the browser window 
and breaks differently when the browser window is resized. 


The <NoBR> tag prevents text and graphics from breaking and reflowing to fit 
the browser window. It is a paired tag. If you want to indicate a place to break 
text within non-breaking sections, use <WBR>. Place this tag within the 
<NoBR> and </NoBR> tags. 


There are plenty of other good reasons to break lines and paragraphs. Breaking 
large copy blocks into smaller concise segments helps readability. Obviously, 
you want to break lines of poetry and address blocks. To break text wrapping 
around graphics so that text starts below the image, use the <BR Clear= tag (see 
page 40). 


There are plenty of good reasons to break<BR> i <BR> ends a line without 
adding any space. 
lines<BR> ———————- 4 
[By <P> ends a paragraph and 
and<BR> adds a line space. 
paragraphs. FE] Put <NoBR> and </NoBR> 
around sections that 
<P> ———__________ 2 should not break. 


Breaking large copy into smaller concise segments Oo Put <WBR> inside the no 


helps readability. Obviously, you will want to break break tags to indicate 
lines of poetry and address blocks. where to break if needed. 
<P> 

<NoBR> ———————— 3 


The no break tag prevents text and graphics from 


reflowing to fit the browser window. It is a paired 4 
tag. EWBRS] If you want to indicate a place to break 
text within non-breaking sections, use word break 
tag. Place this tag within the no break tags. 


</NoBR> 
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SS netscape: Line and Paragraph Breaks 


[Reid [images | Frit | Find | 
Location: [ file :/ / /Macintosh%S20HD /Dean's/HTML/HTMLS20F iles®203rd%20Edtion /!9S20HTMLB20} 


Breaking copy 













You must insert a tag when you want to break a line or end a paragraph in a specific place. 
Otherwise, the text will flow to fit the width of the browser window, and break differently when 
the browser window is resized. 


There ere plenty of other good reasons to break 








=e Ty eis | 3 tes 
fee Gee Cee eee co) Gael) a 























<HTML> 
<HEAD=><TITLE>Line and Paragraph Breaks</TITLE></HEAD> 

<BODY> 

<H1>Breaking copy</H1> 

You must insert a tag when you want to break a line or end 4 paragraph in a specific 
place. Otherwise, the text will flow to fit the width of the browser window, and break 
differently when the browser window is resized. 


There are plenty of other good reasons to break<BR> 
lnes<BR> 
and<BR> 









The no break tag prevents text ay 
Itis paired tag. If you want to 14 
sections, use word break tag. < 
</NoBR> 

</BODY> 

</HTML> 


orw al -d] Hore | 
Location: | file :// /MacintoshS20HD /Dean's /HTML/HTMLS20F iles®:) 
* 
Breaking copy 










You must insert a tag when you went to break a line or end a 
paragraph in # specific place. Otherwise, the text will flow to fit the 
width of the browser window, and break differently when the 
browser window is resized. 





There are plenty of other good reasons to break 
lines 

and 
paragraphs. 


This is how the same page 
breaks if the window is 
narrow. 







Breaking large copy blocks into smaller concise segments helps 
readability. Obviously you will want to break lines of poetry and 
address blocks 


The no break tag prevents text and graphics from reflowing to fit the bro’ 
Place this tag within the no break tags. 
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Adding Space in Netscape 


Some HTML tags allow you to add space around text or graphics. For instance, 
you can add space around graphics (see page 68) or padding in tables (see page 
128). Another way to add space between elements is with the <SPACER> tag, 
which enables you to add space in three ways by defining the type of spacer as 
HORIZONTAL, VERTICAL, or BLOCK. 


The spacer TYPE=HORIZONTAL inserts a blank space that is wide but has no 
height. This is useful because HTML ignores extra spaces typed in to the text, 
unless it is preformatted (see page 82). This is an easy way to add space between 
letters or words. The spacer TYPE=VERTICAL inserts a line space of an exact 
height. Horizontal and vertical spacers are also a way to add space on one side of 
a graphic but not the other, or above a graphic but not below. The spacer 
TYPE=BLOCK inserts a rectangular blank space. This is one way to indent text 
or graphics. 


1 2 3 


eile cipeeeeieilceeeees eesieeseseseennspsneeesl saan aaa ie 
Space between <SPACER TYPE=HORIZONTAL SIZE=20>words. 
4 





<SPACER TYPE=BLOCK HEIGHT=50 WIDTH=10% ALIGN=LEFT> 


i] Start with the text. (0) For BLOCK spaces, 
include the size of the 
B_Insert the <SPACER tag. HEIGHT and WIDTH. 
Measure both HEIGHT and 
EE) Choose HORIZONTAL, VER- WIDTH in pixels or as a 
TICAL, or BLOCK as the percentage of window 
TYPE= of space and size. Also include the 
include the size, mea- ALIGN= tag. Choose 
sured in pixels. between LEFT or RIGHT. 


5) Close the SPACER tag with ! 
the > symbol. 
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imi Adding Space.html 
fms) oe Ee (BiZ1¥) ee ee ee ee 
| eet I sis) CES te) Gh) bal) ae 77 


<HTML> 
<HEAD><TITLE>Adding space in NetScape</TITLE> 
</HEAD> 
<BODY> 
This text has a space added between these 


This text has ¢ space added between these 
PACER TYPE=VEPTI 80> word 


Some HTML tags allow you to add space sound text or graphics. For instance, you 
can add space sround graphics (see page ??) or padding in tables (see page 77) 

DTH 10% ALIGN=LEFT> 
Another way to add space between elements 1s with the <SPACER> tag. It enables 
you to add space three ways by defining the type of spacer as either HORIZONTAL, 
VERTICAL or BLOCK. 
<P> 
The spacer TYPE=HORIZONTAL inserts 4 wide blank space. This is useful because 
H ignores extra spaces typed in to the text as well as the tags. This is an easy 
way to letters or words. The spacer TYPE=VERTICAL inserts a line space of an 
exact size. Honzontal and vertical spacers are also a way to add space on one side of 
a graphic but not the other or above but not below. The spacer TYPE=BLOCK inserts 
a rectangular blank space. This is 3 useful way to indent text or graphics 
</BODY> 
</HTML> 



































Netscape: Adding space in NetScape 
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Location: |file:-///Macinto: {Dean's /HTML/HTML%20F iles 











SS iiss ee a 


\OSrdB20Edtion /!%S2OHTML,| 








This text has a space added between theseL_lwords 





This text has a space added between these 








This is a useful way to indent text or graphics 





words Some HTML tags allow you to add space around text or graphics. For instance, you can 
add space around graphics (see page ??) or padding in tables (see page ??). Another way to 


add space between elements is with the tag It enables you to add space three ways 
| by defining the type of spacer as either HOPIZONTAL, VERTICAL or BLOCK 


The spacer TYPE=HORIZONTAL inserts a wide blank space. This is useful because 
HTML ignores extra spaces typed in to the text as well as the tags. This is an easy way to 
letters or words. The spacer TYPE=VERTICAL inserts 4 line space of an exact size 
Honzontal and vertical spacers are also a wey to add space on one side of a graphic but not the 
other or above but not below. The spacer TYPE=BLOCK inserts a rectanguler blank space 











Clearing Text Wrap 


You wrap text around graphics with the <IMG Align= tag (see page 66). Text 
wraps around the graphic until reaching the bottom of the graphic. However, 
you may want to stop text wrapping before it reaches the bottom to improve 
design and readability. 


Use the <BR Clear= tag to break lines and end wrapping. This tag causes 

copy to start on the next free line below the graphic. There are three options. 
Clear=right starts copy on the next free line on the right margin. Clear=left 
starts copy on the next free line on the left margin. Clear=all starts copy on the 
next free line on both right and left margins. 


1 
ee ree Oe ane ee 
<IMG SRC="Clips1.gif" Align=left> 


This copy will continue to wrap around the graphic and then break here. 


2 3 
BR Clear=lett 
4 


Then the copy will continue on the next free left margin, running on just 
like any other text on the screen. 


Insert the graphic using Ei Put Clear= followed by the 


the <IMG SRC= tag and margin option. Choose 
choose an alignment between right, left, and 
option (see pages 64 and all. 

66). 


EJ Close the tag with the > 
[E) Put the <BR tag after the symbol. 
text you want to break. 
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<HEAD><TITLE>Clearing text wrap</TITLE></HEAD> 
<BODY> 
<H1>Clearing text wrap</H1> 
<P> 
<IMG SRC="Clips1 gif" Align=left>This copy will continue to wrap around the 

hic and then break here. 

ear= 

‘Then the copy will continue on the next free left margin rmning on just like any other 
rex on the screen. 


> 
<IMG SRC="Clips1.gif* Align=1 
grephic and then break here. 


<BR Clear=right> 

Then the copy will continue on th aat—-ed Len] (eet Lee Te) 

text on the screen. Location: ae 77 (Macintosh620HD /Dean's /HTML/HTML9620F iles%®203r d5620E dtion /ISSZOHTML21] 
<BR Clear=nght> 


<P> 

<P> 

<center> 

<IMG SRC="Clips1 gif" Align=l 
Height=200>This copy will conti 
here. 

<BR Clear=all> 

Then the copy will continue on th 
</center> 

</BODY> 

</HTML> 


Then the copy will continue on the next free right margin running on just like any other text on 
the screen. 


This copy will continue to wrap between both 
graphics and then break here. 


Then the copy will continue on the next free left margin running on just like any other text on the 
screen. 


This copy will continue to wrap around the graphic end then break 
here. 


Then the copy will continue on the next free right margin running on just like any other text on 
the screen. 
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Text Links 


Linked text allows a person to click a word or phrase and jump to another file. 
This capability is called hypertext. The linked text shows up in color and is 
underscored depending on the preference settings of the browser. 


Type the example below exactly the way it appears to create a link to a file 
named Art.html. To make your own linked text, just substitute the file name 
and the copy that gets clicked to whatever you want. Page 58 shows when to 
use just a file name and when to use a full path. 


1 3 
hee wad eee 
<A HREF="Art.html">Click here for art.</A> 
a 


2 4 


[EJ Start with the opening tag © (EJ) _ Put the text you want 


<A HREF= in front of the people to click on the 

file name. Think of the <A screen between the > 

as meaning anchor and and < symbols. 

HREF as meaning hyper- 

text reference. oO End with a closing tag </A> 
after the text. 


A Put the file name you 
want to link between the 
quote marks. 
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3 eee 
Sts Ge Se no eae 
Sees ERS eS eee ee a 














<HEAD><TITLE>Linked Text</TITLE></HEAD> 
<BODY> 
<Hi>Linked Text</H1> 


ares the example below exactly the w we See inthe HTML exemple to create 8 
‘to ¢ file named Arthunl, Music hun! and Theater html. To make your own linked 
text just substitute the file name and the copy that gets clicked to whatever you want. 










<A HREF “Theater hunl">Click Ten for theater. </A><BR> 
</BODY> 
</HTML> 









The file name in the HREF tag 
isn’t seen in the browser. All 
that shows in the browser is 
the text to click to jump to that 
link. 





Linked Text 














e the example below exactly the way it 4) P| ers in the HTML example to create a link to a 
a, named Art html, Music.html and Theater. To make your own linked text just substitute 
the file neme end the copy that gets dicked to whetever you want. 






Click here for theater 








Background, Text, and Link Colors 


Browsers display backgrounds, text, and links, both new and visited, in default 
colors determined by the preference settings. Backgrounds are usually gray or 
white. Text is black. Links are two contrasting colors so they pop out of 
unlinked text. 


Since color preferences vary from user to user, it is important that you set all 
these colors in every document you create. If you don’t, your file may not look 
the way you expect. In fact, it can look pretty weird. That isn’t a problem for 
uninhibited cybermaniacs. It is a problem for designers maintaining an online 
corporate identity. 


You set background, text, and link colors in the body tag at the beginning of an 
HTML file. Color is a mix of red, green, and blue in hexadecimal notation. Black 
is 000000—that is, no color. White is ffffff, or full color. Experiment to find the 
combinations you like. You can also specify color by name instead of number. 
Common colors like green, yellow, and red have been given numeric equiva- 
lents (see page 200). Remember, transparent graphics designed for white back- 
grounds won’t look good on dark colors. 


1 2 3 


<BODY BGColor="303030" Text="807060" Link="Green" 
VLink="Yellow"> 


4 


\ 

| 

GD Start with the <B00Y tag. EJ Put the values of red, 3 

green, and blue, or the { 

A Put 86Color=, Text=, Link=, color name, between 

and VLink= after the open- quotes for each. | 

ing <BODY tag. Think of 

BGColor as meaning back- Og Close the tag with the > | 

ground color and VLink as symbol. } 
visited link. 


| 
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BackLinkTextColor.htm 





<HTML> 
<HEAD><TITLE>Background, text and link colors</TITLE></HEAD> 

<BODY BGColor="ffff99" Text="807060" Link="Green" VLink="Yellow">¥ 
<H1>Background, text and link colors</H1>% 

<P>9 

You set background, text and link colors in the body tag at the beginning of an HTML 
file. Coloris a mix of red, green and blue in hexadecimal notation. Black 1s 000000, or 
no color. White is ffffff, or full color. Experiment finding combinations you like. You can 
also specify color by name in stead of number. Common colors like green, yellow and 
red have been given numbenic equivalents (see page ??). Remember, transparent 
graphics designed for white backgrounds wont look good on derk colors. 4 

<P>9 


This is a <A HREF="Sample HTML">link </A>¥ 

<P>G 

This is a <A HREF="AlignText HTML">link</A> that was visited 4 
</BODY> 

</HTML>¥ 


SS nS 74 a link colors 






Aca text and link colors 


You set background, text and link colors in the body tag ot the beginning of sn HTML file. Color 
is a mix of red, green and blue in hexadecimal notation Black is 000000, or no color. White is ffffff, 
or foll color. Experiment finding combinations you like, You can also specity color by name in 
stead of number. Common colors like green, yellow and red have been given numbenc equivalents 
(see page ??). Remember, transparent graphics designed for white backgrounds wont look good 
on dark colors 


This is afink] 
This is ofinkphat was visited 














Graphic Links 


Linked graphics allow a person to click an image and jump to another file. This 
capability can make your documents easier to use. Good clear graphics commu- 
nicate quickly and enhance the usability of your document. The linked graphic 
shows up outlined in color depending on the preference settings of the browser. 


To link a graphic, type the same code as for linked text. In place of the clickable 
text, insert a graphic for users to click. 


Type the example below exactly the way it appears to create a link to a file 
named Art.html. To make your own linked graphic, just substitute the file name 
and the image that gets clicked with your own file name and image. 


For other ways to create links with graphics, see Image Maps—Using CGI Scripts 
(page 90), Image Maps—Using Browsers (page 92), and Graphic Send Buttons 
(page 116). 


1 3 
Na est ee ee ees eee 
<A HREF="OldDog.html"><IMG SRC="Dog1.gif"></A> 
nm oh eee ae 
2 4 5 
Start with the opening tag © EJ Putthe <IMG> tag (the tag J} End with a closing tag 
<A HREF= in front of the file that inserts a graphic on </A> for the link after the 
name. the screen, see page 64) last part of the <IMG> tag. 
between the > and < sym- 
[EJ Put the file name you want bols of the link tag. Think 
to link between the quote of IMG as meaning image. 
marks. 


Ej Put the file name of the 
image you want people to 
click between the quote 
marks of the <IMG> tag. 
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<HTML> 
<HEAD> <TITLE>Linked Graphics</TITLE></HEAD> 

<BODY> 

<H1>Linked Graphics</H1> 

Linked graphics allows a person to click on 4 image and jump to another file. This 
ability can make your documents easier to use. Good clear graphics communicate 
quickly and enhance the usablity of your document. The linked graphic shows up 
outlined in color depending on the preference settings of the browser. 


<A HREF="OldDog hmml"><IMG SRC="Dog1.gif'></A>| 


hore about my old aog 
<P> 

<A HREF="NewDog.html"><IMG SRC="Dog2 gif'></A> Click the picture to leam 
more about my new dog.<BR> 

</BODY> 

</HTML> 









Click the picture to learn 






jetscape: Linked Graphics —— 


so Reload | Images | Print t 
Location; | file ;// /Macintosh%S20HD /Dean's /HTML /HTMLS20F iles%203r'dB20Edtion /S2OHTML B2I 


Linked Graphics 


Linked graphics allows a person to click on a image and jump to another file. This ability can 
make your documents easier to use. Good clear graphics communicate quickly and enhance the 





















The file names of the linked 
file and the graphic in the HREF 
tag aren’t seen in the browser. 
All that shows in the browser is 
the graphic to click to jump to 
that link. In this example, the 
text is not part of the link. To 
make the text and graphic part 
of the link, see page 56. 


usablity of your document. The linked graphic shows up outlined in color depending on the 
preference settings of the browser. 


(Click the picture to learn more about my old dog. 








Ea) Click the picture to learn more about my new dog 


er Ee | —Z ](] 
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Dimensions for Graphics 


The time it takes to load graphics is one problem of Web page design. LowSRC 
can help by substituting a low resolution graphic while the text loads (see page 
64). Another way to speed up load time is by including Width and Height 
dimensions as part of the <IMG tag. 


Width and Height dimensions, which are measured in pixels, tell the browser 
how large an image will be without retrieving the entire graphic file. With the 
dimensions, the browser first blocks out the required space, lays out the docu- 
ment, displays the text, and then loads the graphic. This means the person 
viewing your page will have something to read while the images load. 


Scaling graphics is another use of the Width and Height dimensions. Browsers 
will stretch or squeeze graphics to fit the size you define. 


<IMG SRC="Clips2.gif" Width="200" Height="75"> 


[EJ Start with the opening tag [J Put Height- followed by the 


<IMG SRC= in front of the dimension measured in 
file name. Think of SRC pixels within the <IMG 
as meaning source. tag. 


[BA Putthe graphic filename J End with a closing tag >. 
you want displayed 
between the quote marks. 


[E]) Put Width- followed by the 
dimension measured in 
pixels within the <IMG 
tag. 
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— 5 ——— 
Heo By eS Ga 1 









Io Geass) FES) ee 






|sHTML> 
<HEAD><TITLE>Dimensions for Graphics</TITLE></HEAD> 

<BODY> 

<H1>Dimensions for Graphics</H1> 

One problem of web design is load time, LowSRC can help by substituting a low 
resolution graphic while the text loads (see page 00). Another way to speed up load 
time is by including Width and Height dimensions as part of the IMG tag 

<P> 

Width and height dimensions tell the browser how large an image will be before it 
retrieves the graphic file. The browser first blocks out the required space, lays out the 
document, displays the text and then loads the graphic, 
<P> 
















Scaling graphics is another use of the width and height arguments. Browsers will 
stretch or squeeze graphics to fit the size you define. Width and Height are measured 
in pixels. 

<P> 

<IMG SRC="Clips1.gif'> Regular. 

<IMG SRC="Clips2.gif'> Large. 











<P> 

<IMG SRC="Clips1.gif" ¥ 10"> Regular, 
<IMG SRC="Clips2.gif" S}> Large. 
</BODY> 

</HTML> 


















Netscape: Dimensions for Graphics 


Lest} [Revee Timenes [rrint [tet] 
Location: [me of / /tMacintoshS20HD /Dean's /HTML/HTML&20F iles®20SrdB20Edtion /!S2OHTML B21 


Dimensions for Graphics 


One problem of web design is load time. LowSRC can help by substituting « low resolution 
aphic while the text loads (see page 00). Another way to speed up load time is by including 
ith and Height dimensions as part of the IMG tag. 


SSS SSS 









‘Width and height dimensions tell the browser how large an image will be before it retrieves the 
graphic file. The browser first blocks out the required space, lays out the document, displays the 
text and then loads the graphic. 






Scaling graphics is another use of the width and height arguments. Browsers will stretch or 
squeeze graphics to fit the size you define, Width and Height are measured in pixels. 
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Borders on Graphic Links 


Browsers display graphics without borders, and graphic links with them. 
However, you can add, remove, and vary the thickness of borders around both 
kinds of graphics. Borders are measured in pixels. 

Adding borders to graphics that are not links and eliminating them from linked 
graphics can confuse people viewing your file because this is contrary to the 
standard way of identifying links. 


1 2 
ea ne orients 
<IMG SRC="Dog1.gif" Border=1 o> 


3 


Start with the <IMG SRC Put Border= after the file KE] Close the tag with the > 
tag in front of the file name and the width of the symbol. 


name (see page 64). border measured in pixels 
after the = symbol. 
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07861-21.htm 


foe I BIZ) is lal 
fem eel (elle) (I) ee) 0 


|sHTML> 

<HEAD><TITLE>Borders on graphics</TITLE></HEAD> 

<BODY> 

<H1>Borders on graphics</H1> 

<P> 

Browsers display graphics without borders and graphic links with one. However, you 
can add, remove and vary the thickness of borders around both kinds of graphics, Set 
border widths when inserting graphics with the image tag (see page 00) 

<P> 

<IMG SRC="Dog1.gif" 

<IMG SRC= ="Dogl, oriorier=ia 

</BODY> 

</HTML> 


Netscape: Borders on graphics 


[Retest [images [ Print [Find] 
Location: [me :/ / /MacintoshS20HD /Dean's /HTML /HTML%20F ilesS203rdB20Edtion /ISZOHTMLB2I 


Borders on graphics 


Browsers display graphics without borders and graphic links with one. However, you can add, 
remove and vary the thickness of borders around both kinds of graphics. Set border widths when 
inserting graphics with the image tag (see page 00) 
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FTP and E-Mail 


Browsers can retrieve files by using an anonymous FTP to connect to the FTP 
servers. Just put the complete URL of the file you want to get as the file name of 
the link. When someone clicks the link for the file in their browser, the browser 
connects to the FTP server and saves the file to their hard disk. 


Some browsers also send e-mail. Put the complete e-mail address as the file 
name of a link. When a person clicks the link, a dialog box appears for the sub- 
ject and body of the message. 


The format for the address that you link to uses URLs. The URL includes the 
type of service, the address, the path, and the file name. You can use this same 
technique shown here for FTP servers to connect to Gopher and UseNet news. 
The URL codes for the most popular Internet services are at the top of the fol- 
lowing page. 


1 2 3 4 
eee ote ey 
<A HREF="ftp://tp.myDomain.com/Pub/freeware.txt">Get Freeware</A> 


<A HREF="mailto:myName@myDomain.com">Mail to me.</A> 
= . ai; & 


6 7 8 


Ed) Start with the opening tag (EJ Put the text you want peo- Put the text you want peo- 


in front of the URL. ple to click between the > ple to click between the > 
and < symbols. and < symbols. 
Put the complete URL of 
the file you want to 4 | End with a closing tag Bi End with a closing tag 
retrieve between the after the text. after the text. 


quote marks. This 

includes the URL code for B Start with the opening tag 
FTP (ftp://), the address in front of the e-mail 

of the FTP server address. 

(ftp. myDomain.com), the 

path (/Pub/), and the file OG Put the complete URL of 


name (freeware.txt). FTP the person you want to 

paths and file names can send a message to 

be case sensitive, so use between the quote marks. 

the correct capitalization. The URL is mailto: fol- 
lowed by their e-mail 
address. 
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Internet Service URL Code 

World Wide Web http:// 

FTP ftp:// 

Gopher gopher:// 

Mail mailto: (Not all browsers support this.) 
UseNet News news: 














= See FTP and E-m 


Location: | file :/ //Macintosh%S20HD /Dean's /HTML/HTML®20F ilesS203rd%20Edtion /!SSZOHTMLB2( 


FTP and E-mail 
To retneve a free copy of this software dich(Get Freeware] 


To send your comments bout this software click Mail to me. 









myName@myDomain.com 











|sHTML> 
<HEAD><TITLE>FTP and E-mail</TITLE></HEAD> 
<BODY> 

<H1>FTP and E-mail</H1> 









<P> 

To send your comments about this software click <A 
HREF="mailtoxmyName@myD omein.com">Mail to me.</A> 
</BODY> 

</HTML> 











Alternatives to Images for Non-Graphical 
Browsers 


People using non-graphical browsers, like Lynx, and people who turn off the 
image loading in graphical browsers do not see in-line graphics on their screens. 
They only see text; the word [IMAGE] replaces the graphic. If you want them to 
know what graphic you inserted, you have a problem. 


The solution is an extended version of the <IMG> tag. The <ALT> tag allows 
you to include a description of the graphic. This descriptive copy substitutes for 
the graphic. It is a good idea to do this for all graphics. 


Another alternative here is to simply include a separate text link following the 
graphic link for any picture. That way, people using browsers that don't support 
the <ALT> tag still have a link to use. 


1 3 5 
ste Ie ak edhe ; 1 
<IMG SRC="Dog1.gif" ALT="[Picture of a mixed breed.]"> 

oat ae 


1 | Start with the opening tag | 3 | Put the <ALT> tag after the End with a closing > sym- 
<IMG SRC= in front of the name of the graphic file. bol of the <IMG> tag. 
graphic file name. 

O Put the descriptive copy 

g Put the graphic file name that substitutes for the 
between the quote marks. graphic between the 

brackets of the <ALT> tag. 
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SSS 07861-23.htmI fz 

[fims sw i2 eB I7y) (23) lal © Gass 

| erm dS) ESS) FSS) (HS) Cierny aes) FS 
0 

) ODS LA Ra a SR GS SERIE 

<HTML> 

<HEAD><TITLE>Altemates</TITLE></HEAD> 

<BODY> 

<H1>Altemates for Non-Graphicel Browsers</H1> 

People using a non-graphical browsers like lynx and people who tum off the image 

loading in graphical browser, do not see in-line graphics on their screens. They only 

see text. The word [IMAGE] replaces the graphic. If you want them to know what 

graphic you inserted you have a problem. 

< 

The solution is an extended version of the &ltIMGé&gr; tag. The &lt,ALT& gr tag 

allows you to include a description of the graphic, This descriptive copy subsututes for 

the graphic. Itis a good idea to do this for all graphics. 

<P> 






































ml"><IMG SRC="Doeg1.af ALT= 
he picture to ear more ad out my old 


dog. 








Netscape: Alternates 


(en [rues | rat [Fe 
Location: | file :///Macintosh%S20HD /Dean's /HTML/HTML®20F iles®203rd%20Edtion /!S2OHTMLB2t 


Alternates for Non-Graphical Browsers 















more about my new dog. 
</BODY> 
</HTML> 











People using a non-graphicel browsers like lynx and people who tum off the image loading in 
aphical browser, do not see in-line graphics on their screens. They only see text. The word 
[IMAGE] replaces the graphic. If you want them to know what grephic you inserted you have 4 

problem. 


The solution is an extended version of the <IMG> tag. The <ALT> tag allows you to include 4 


description of the graphic. This descriptive copy substitutes for the graphic, It is a good idea to 
do this for all graphics. 


D 
Pa (Picture of amuxed breed.] | F954 the picture to leam more about my old dog 


or 


ea] 
MP) Picture of a Rottweiler, Click the picture to learn more about my new dog. 








Links Within Documents 


Text and graphics can link to places within the same document. These links 
require two parts: the anchor and the link. The anchor identifies the place to 
jump to. The /ink uses the name of the anchor instead of the name of a file. 
(The list items used in the example code here are explained on pages 52-53.) 


Link 
1 3 
os pea a 
<A HREF="#Krista">Krista</A> 
ea a 
2 4 
Anchor 
5 7 8 
ease ee ole ea 
<A NAME="Krista">Krista</A> 
Arista 
6 


Start with the opening tag 
<A HREF= in front of the 
anchor name. 


Put a # symbol followed 
by the anchor name you 
want to link to between 
the quote marks. 


Put the text you want peo- 
ple to click on between 
the > and < symbols. 


End with a closing tag 
</A> after the text. 


Start with the opening tag 
<A NAME= in front of the 
anchor name. 


Put the name of the 
anchor between the quote 
marks. 


Put the text that appears 
on the screen between the 
>and < symbols. 


End with a closing tag 
</A> behind the text. 
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6 SS 00861-24E Ead 
ea ee 19 ees 

Norma dE) (ISI DEES) Ge) bebo) be) a 
| terms J) ESI) CRIS) (ee) Ceiteiel) (ede) am | 























|sHTML> 
<HEAD><TITLE>Links within documents</TITLE></HEAD> 

<BODY> 

<H1>Links to parts of the same document</H1> 

Text and graphics can link to places within the same document. These links require 
two parts; the anchor and the link. The anchor identifies the place to jump to. The link 
uses the name of the anchor instead of the name of « file. 

<P> 

For example: clicking on the word <B>Krista</B> in the list below will scroll the 
window to the place where the anchor is. When the document is very long you can 


jump around quickly. 
en 







ee ae Dithin documents 


Location: | file:///MacintoshS%20HD /Dean's/HTML/HTML®20F iles®203rd% 20Edtion /!S20HTMLB2¢| 


Links to parts of the same document 









="ai jenny Jenny </A> 
"Mike">Mike</A> 















Text and grephics can link to places within the same document. These links require two parts; 
the anchor and the link. The anchor identifies the place to jump to. The link uses the name of the 
anchor instead of the name of a file. 


For example: clicking on the word Krista in the list below will scroll the window to the plece 
where the anchor is. When the document is very long you can jump around quickly. 





ae 07861-24.ntmi 
Geel ets 2S alee aes a ae 








After coming to this country she entered Cooper Union in lower 
studied art and architecture. She now resides in the sullivan 
husband and two dogs. She illustrates books and has 

New York galleries over the years since she came to this 






















</A> Glasser</B><BR> 
agended the City University of New York where she 
ting she went on to be part of the Texas A&M off 
analyzed core samples from all over the world. 
he left for a position with a geological surveying 





a —— a ee =e 





= ee 
\lee] 


= peat file: 11 (Macintosh%2Z0HD /Dean's /HTML/HTML&20F iles ®203r d% 20Edtion /!1%Z2OHTMLB 2G 









‘Born in Besiin in 1937 After coming to this country she entered Cooper Union in lower 
Manhattan where she studied art and architecture. She now resides in the sullivan count 

Catskills with her husband and two dogs. She illustrates books and has exhibited her paintings 
in New York galleries over the years since she came to this country. 


Jenny Glasser 
Boman New York City, She attended the City University of New York where she studied 
eophysics. After graduating she went on to be part of the Texas A&M off shore deep ocean 
g team. She anelyzed core samples from all over the world. After several years with the 
team she left for a position with a geological surveying company in Oslo Norway 


Anchor 














Relative and Absolute Path Names 


An URL describes the location of a file. A complete URL includes the name of 
the server, disk, and all the directories within which a file resides. URLs are also 
called paths. There are two types of paths. 


Absolute paths spell out the location of a file by starting at the highest level and 
listing each directory needed to find the file. You start the path with the type of 
service, which is http:// for Web pages, followed by the name of the server, a 
slash (/), and the exact name of each directory and the file. Getting one part of 
the URL wrong means the file won’t be found. You will have to change paths in 
your document if a disk or directory name changes. 


Relative paths spell out the location of a file based on the current document 
location. When you use a file name like xyzFile.html, you are using a relative 
URL. In this case, the browser looks for the file in the same directory as the cur- 
rent document. If it is not there, the file won’t be found. When you type ../ in 
front of the file name (i.e., ../xyzFile.html), the browser looks for the file in the 
directory one level above the current document. When you type ../../ in front 
of the file name (i.e., ../../xyzFile.html), the browser looks for the file in the 
directory two levels above the current document. 


Web URLs are case sensitive, so be sure to use proper capitalization. 


t 3 Using ../ indicates a 
a ee directory level above the 
Jab Choe yer estes saab 
2 


The directory names are 
separated by slashes. 


The file name. 
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URL Where the referenced file is found 
xyzFile.html The HTML file named xyzFile.html is found in the 
current directory 
abcFolder/xyzFile.html The HTML file named xyzFile.html is found in the 

folder named abcFolder in the current directory 
http://myDomain.com The HTML file named xyzFile.html is found in the 
/abcFolder/xyzFile.html folder named abcFolder on the server named 


myDomain.com 





../abcFolder/xyzFile.html The HTML file named xyzFile.html is found in the 
folder named abcFolder one directory level above 
the current directory 





../../abcFolder/xyzFile.html The HTML file named xyzFile.html is found in the 
folder named abcFolder two directory levels above 
the current directory 












[limes 





|s<HTML> 
<HEAD><TITLE>Path names</TITLE></HEAD> 





<Hi1>Relative and absolute path names</H1> 

<A HREF ="xyzFile html">xy2File hunl</A><BR> 
The html file named xyzfile html is found in the current directory 
<P> 


<A HREF ="abcF older/ Se abcF older/: 










2File himl</A><BR> 
SS ee names =—— 


.] Location : | file :/ / /Macintosh%20HD /Dean's /HTML/HTMLS20F ilesS203rd% 20E dtion /!S2OHTML S20) 


















level sbove the current 
<P> 


<A HREF=". /. /abcFold 







abcF oldex/sy2File html 
The html file named xyzfile.html is found in the folder named abcF older in the current directory 









isnt HimyD omein com/sbcF older/xy2File html 
The htm file named xyzfile html is found in the folder named abcF older on the server named 
myDomein.com 












/abcF older/xy2File hunl 
The html file named xyzfile html is found in the folder named abcF older one directory level above 
the current directory 








wl /abcF older/xyzFile html 
The html file named xyzfile htral is found in the folder named sbcF older two directory levels above 
the current directory 








Block Quotes 


One way to style type so that it stands out from the rest of your copy is by using 
the <BLOCKQUOTE> tag. This tag indents the text. You still have to use the <P> 
and <BR> tags to break paragraphs and lines in particular places (see page 36). 


<BLOCKQUOTE> —__—_—_—_—_——_— 1 


What is the difference between a taxidermist and a tax collector? 
The taxidermist takes only your skin. 


<P> 
-Mark Twain 


</BLOCKQUOTE> ———_—————_—_ 3 


(Start with an opening tag «(J Put the text you want to fE}) End with a closing tag 
in front of the text. Style between the tags. after the text. 
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_—SAVouwV”mV'.m”:?==_ 786 1-26.html 
| Pimes __fs Biziy) (2s) ela ) Gees 
[ Perma i) eels) CIES) (HS) Li} (ees) ae 
eee ponerse Sere og RS ee ee Me Te 
eee pene ae er are dt eee Eee e cee FS EP eee er eee Seger a CE 
<HTML> 

<HEAD><TITLE=Block Quotes</TITLE></HEAD> 

<BODY> 

<H1>Block Quotes</H1> 

One way to style type so that it stands out from the rest of your copy is by using the 


&ltBLOCKQUOTES gt; tag. This tag will indent the text. You will still have to use 
the &lt;P&gt; and &lyBRé&gt; tags to break paragraphs and lines in particular places. 













<BLOCKQUOTE> What is the difference between a taxadermist and a tax collector? 
e taxidermist takes only your skin. 
<P> 


= Netscape: Block Quotes 


Location: | file :// /Macintosh%S20HD /Dean's /HTML/HTML®20F iles S203rd% 20Edtion / !%S2OHTML%20) 
Block Quotes 


One way to style type so that it stands out from the rest of your copy is by using the 
<BLOCKQUOTE> tag. This tag wall indent the text. You will still have to use the <P> and 
<BR> tags to break paragraphs and lines in particular places 


‘What is the difference between a taxidermist and a tax collector? The taxadermist 
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Dividing Rules 


One way to divide documents into sections is by using rules. The <HR> tag 
inserts a rule that stretches completely across the screen. The rule breaks the 
copy wherever it is inserted. Various browsers draw rules differently, but they all 
appear black and scale to the same width as the browser window. Think of HR 
as meaning horizontal rule. 


Another way to divide documents into sections is by using graphics as rules. 
You make the graphic rule in a paint program and insert it with the <IMG> tag 
(see page 64). Graphic rules do not change width when the browser screen is 
resized. The rule does not break the copy unless you use the <P> or <BR> tags. 


You can change the look of the standard non-graphic rule by using optional 
arguments to the <HR> tag. Size alters the thickness of a rule measured in pix- 
els. Width alters the length measured in pixels or by percent of window width. 
Align shifts the position of rules if they are shorter than the window width. 
NoShade creates a solid, unbeveled rule. 


Inserting a dividing rule 
<HR>—-————- 
Rules are one way to divide documents into sections. 


<HR Size=10 Width=200 Align=Center NoShade> 











——— 
2 3 4 5 

EY The <HR> tag inserts a EEX Put Width followed by the = [ZJ} Put Align followed by a 

standard rule. number of pixels or a per- direction within the <HR> 
cent of window width tag to change the position 

| 2 | Put Size followed by a within the <HR> tag to of a rule that is not as 
number of pixels within change the length of a wide as the window. 
the <HR> tag to change the rule. Choose between left, right, 
thickness of a rule. or center. 


[Ey Put NoShade within the 
<HR> tag to eliminate the 
beveled look of rules. 
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er 07861-27.html 
: a ea mul} (3) (Sees 
| Bormat_— i SSS) HHS Se) Cobol bel) a 4 











<HTML> 

<HEAD><TITLE>Dividing Rules</TITLE></HEAD> 

<BODY> 

<H1>Inserting Dividing Rules</H1> 

<HR> 

One way to divide documents into sections is by using rules. The &ltHRé&gr; tag 
inserts a rule completely across the screen. The rule will break the copy where ever 


inserted. It will appeer black and scale to the same width as the browser window. 


nother way to divide documents into sections is by using graphics as mules. You 
make the graphic rule in a paint program and insert it with the &lt;IMGé&gr, tag. See 
page 00.. Graphic rules do not change width when the browser screen is resized. The 
rule will not break the copy unless you use the &ltP&gt; or &ltBRa&grt; tags. 
<P> 
Other ways to control rules are by<BR> 
wadth and alignment 


mn) 
<HR AlignaCe enter Wiith= 200> 


<HR Align=Right Width=200> 
<HR Align=Center Width=80%> 


Netscape: Dividing 





Location: |file:// /Macintosh%S20HD /Dean's /HTML /HTML%20F iles%203rd%20E dtion/!S2OHTMLB201 













Inserting Dividing Rules 


a ‘way to _ aan into sections 1s 5 using ae = — tag mserts 4 or 


completely across the screen The rule will break the copy where ever inserted. It will appear 
black and scale to the same width as the browser window. 







Another way to divide documents into sections is by pee graphics as rules. You make the 
graphic rule in a paint program and insert it with the <IMG> tag. See page 00. Graphicrules do 
not change width when the browser screen is resized. The rule will not break the copy unless you 
use the <P> or <BR> tags. 


Other ways to control mules are by 
width and alignment 








Graphics 


Browsers can display graphic images along with text, which makes documents 
look better. More importantly, images communicate information that would be 
impossible or too difficult to communicate in words. 


You insert a graphic using the <IMG> tag and the name of the graphic file. All 
browsers do not read all file formats. Use the GIF format for saving graphic files; 
it is read by most graphical browsers. 


Remember that graphic files can be big. Big graphics mean even bigger files. Try 
to keep image files small. Documents with large images or many small ones take 
a long time to transfer over the Web, usually longer than anyone wants to wait. 
Often the image is not worth the long load time anyway. Use graphics only 
when they add information or utility. 


One way to speed up load times is by using the LowSRC argument with the 
<IMG tag. Create two versions of the graphic, high and low resolution. When 
the browser loads the HTML file, the low resolution graphic is displayed along 
with the text. Then the browser retrieves the high resolution graphic replacing 
the low resolution display. 


Type the following example exactly the way it appears to insert a graphic 
named Clips1.gif and a low resolution file named Clips1BW.gif. To insert your 
own graphic, just substitute the file names with your own. This works for image 
files in the same directory as the current Web document. You must specify an 
URL for a graphic if it is not in the same directory (see page 52). 


You should decide on a consistent place to keep graphic files, whether that is in 
the same directory as the HTML files or not, and a consistent method for refer- 
ring to graphic files. It is good practice to indicate where the files are with a 
more specific URL. This guarantees that the graphic files will always be found. 


1 4 
Es ee Ee 
<IMG SRC="Clips1.gif" LowSRC="Clips1BW.gif"> 
= ee a 
3 5 
GD start with the opening tag  E- Put the graphic file name gO Put the low resolution file 
<IMG SRC= in front of the you want displayed name you want displayed 
file name. Think of SRC as between the quote marks. between the quote marks. 
meaning source. 
EX) include the tag LowSRC= Ey End with a closing tag > 
if you want to use a low after the file name. 


resolution source. 
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Rate Approximate Transfer Time for 100K File 
2400 8-10 minutes 10-12K per minute 
9600 2-4 minutes 40-SOK per minute 

14400 1.5 minutes 60-80K per minute 

28800 0.75 minutes 120-160K per minute 





07861-28.html 













|sHTML> 
<HEAD><TITLE>Graphics</TITLE></HEAD> 

<BODY> 

<H1>Graphics in HTML</H1> 

Browsers display graphic images along with text making documents look better. More 
importently, images communicate information that would be impossible in words 
<P> 













or a ee PEE = = 


Location: | file :///MacintoshS20HD /Dean's /HTML /HTML%20F ilesS203rdB20Edtion /!S2OHTMLB20| 


Graphics in HTML 


Browsers display graphic images slong with text making documents look better. More 
importantly, images communicate information thet would be impossible in words 












Aligning Graphics 


You align graphics with text by using the ALIGN attribute within the <IMG> tag. 
There are several alignment options: top, texttop, middle, absmiddle, bottom, 
absbottom, and baseline. Some of these options have the same result when 
used. Some are subtly different. For example, bottom and baseline are the same. 
They both align the baseline of the text with the bottom of the graphic. The 
absbottom option aligns the absolute bottom of the text (including descenders) 
with the bottom of the graphic. Think of abs as meaning absolute. 


If you do not specify an alignment, the text aligns with the bottom of the 
image. 


Type the example below exactly the way it appears to insert a graphic named 
dollar.gif. To insert your own graphic, just substitute the file name with your 
own. 


4 
dl: 
<IMG ALIGN=top SRC="dollar.gif">Text and graphic aligned top. 
SSS Oe mea 
1 2 3 5 
1 | Start with the opening Fs Put the graphic file name a The text can come before 
<IMG tag. you want displayed or after the image that 
between the quote marks aligns to it. 
A Put the ALIGN- attribute as the source. 
next. Choose the align- 
ment option you want, oO End the image tag with a 
followed by SRC=. closing > symbol behind 


the file name. 
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07861-29.html 
Pitines i) 2 ez) Ss | @) nq 
ESS) FES) ES) Chit) bd) a 
en yeas Sa ge yo aR a ge TR a, a Oe 


ee ee ee 
|sHTML> 

<HEAD><TITLE>Aligning Graphics</TITLE></HEAD> 

<BODY> 

<H1>Aligning Text to Grephics</H1> 

You align graphics with text using the ALIGN ettnbute within the &lrIMGé& gr; tag. 
There are three alignment options: top, middle and bottom. If you do not specify an 
alignment the graphic sligns the text to the bottom of the image. 

<P><font size=5> 

=p 

Text and graphic aligned texttop.<IMG ALIGN=texttop SRC="Doller.gif'> 

<P> 





Text and graphic aligned middle. <IMG ALIGN=middle SRC="Dollar. gif'> 
<P> 






ed absmiddle.<IMG ALIGN=absmiddle SRC="Dollar. gif'> 


Text and graphic ali 
<P> = Netscape: Aligning Graphics 






Aligning Text to Graphics 









You align graphics with text using the ALIGN attnbute within the <IMG> tag. There are three 
alignment options: top, middle and bottom. If you do not speaify an slignment the graphic sligns 
the text to the bottom of the image. 





 UNDPED STATES OF AMENIOS 1p 


Eo | 


VE: 
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Adding Space Around Graphics 


In-line graphics fit snug against other elements on-screen, whether those are 
above or below or to the right or left. Sometimes this looks funny. So you will 
want to add extra space. 


Add space above and below graphics by including VSpace in the <IMG tag. Add 
space to the right and left of graphics by including HSpace in the <IMG tag. 
Measure space in pixels. 


To nest graphics in text blocks, use either the Align=left or Align=right argu- 
ments to the <IMG tag (see page 66). Other alignment options work, but they 
create odd run-arounds with blocks of copy. These options might look fine with 
one line of copy or if the graphic is used at the beginning of a paragraph. 


To stop text from wrapping around graphics use the <BR Clear= tag (see 
page 36). 


1 2 3 4 5 
a a ate aa A i [i see ee |, 
<IMG SRC="Dog1.gif" Align=left HSpace=50 VSpace=1 Oz 

6 


Start with the <IMG SRC [EY Put HSpace within the <IMG [J Close the tag with the > 


tag in front of the file tag to add space to the symbol. 
name. right and left of the graph- 
ic. Think of the H as 
[EA Put the graphic file name meaning horizontal. Put 
you want displayed the number of pixels after 
between the quote marks. the = symbol. 


i Choose right or left align- fe Put VSpace within the <IMG 
ment to nest graphics in tag to add space above 
copy blocks. and below the graphic. 

Think of the V as meaning 
vertical. Put the number 
of pixels after the = sym- 
bol. 
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<HEAD><TITLE>Adding space</TITLE></HEAD> 
<BODY> 

<H1>Adding space around gaphics</H1> 
<P> 








a \y dog 
Breakfast, Lunch, Diner, Snack, Cookie, Biscuit, Yogurt, Cat, Squirrel, Apple, Carrot, 
Bone, Pill, as in a pill covered with Butter, Do you want to Eat?, Are you hungry?, No, 
that's not your food, Drop that Pizza crust, now! and variations on the theme, No 
scrounging, Dont you dare, NO!, Drop it!, Sit, Up, Down, Get in the Truck, Car, Van, 
Shake hands, Ball, Knsta, Dean, Timber, Aroma (Ubie), Jenny, Mike, Elenor, Fran, 
Winnie, Go to bed, Go to the mn, Do it, Want to go out?, Want to go for a walk?, 
Where's Krista?, Stay, Come. 
</BODY> 
</HTML> 




















Netscape: Adding 


Back [Forverd] Home } (_eait Reload [ images | Print | Find p 
Location : [me / 1 /Macintosh®20HD /Dean's /HTML/HTMLS20F iles S203r dB 20Edtion /!%S2ZOHTMLB20}) 


Adding space around gaphics 












Here is a partial list of words one 
of my dog knows. Breakfast, 
Lunch, Diner, Snack, Cookie, 
Biscuit, Yogurt, Cat, Squirrel, 
Apple, Carrot, Bone, Pill, as ina 
pill covered with Butter, Do you 
want to Eat?, Are you hungry?, 
No, that's not your food, Drop 
that Pizza crust, now! and 
variations on the theme, No 
scrounging, Don't you dare, NO!, 
Drop it!, Sit, Up, Down, Get in 

















07861-30b.htm 












Here is a partial list of words one of my dog 
ows. Breakfast, Lunch, Diner, Snack, 
ookie, Biscuit, Yogurt, Cat, Squirrel, Apple, 
‘arrot, Bone, Pill, as ina pill covered with 
Butter, Do you want to Eat?, Are you 
hungry?, No, that's not your food, Drop that 
Pizza crust, now! and variations on the theme, 
scrounging, Don't you dare, NO!, Drop it!, 
Sit, Up, Down, Get in the Truck, Car, Van, 
Shake hands, Ball, Krista, Dean, Timber, 
Aroma (Ubie), Jenny, Mike, Elenor, Fran, 
Winnie, Go to bed, Go to the run, Do it, Want to go out?, Want 
to go for a walk?, Where's Krista?, Stay, Come. 


al ist of words one of my dog kno 
Breakfast, Lunch, Diner, Snack, Cook, Biscuit, 
Bone, Pill, as in a pill covered with Butter, Do you 
that's not your food, Drop thet Pizza crust, now! 4 
scrounging, Don't you dare, NOI, Drop it!, Sit, Up, 
Shake hands, Ball, Krista, Dean, Timber, “Aroma ( 
Winnie, Go to bed, Go to the rm, Do it, Want to 
Where's Knista?, Stay, Come. 

</BODY> 

</HTML> 







































Transparent Graphics 


Most GIF file formats are opaque; even the white parts of the image are not 
transparent. Opaque and transparent images are always rectangular; you cannot 
change that. However, silhouetted transparent images seem irregularly shaped 
and float on the background. 


You make opaque GIF files transparent by using converter software. Converters 
for most platforms are available at FTP archives. (The site at ftp.ncsa.uiuc.edu 
has all the converters listed below.) They all work pretty much the same way. 
Popular image editors that support transparent GIFs for Windows, Mac, and 
UNIX are 








Platform Program Directory and Name at ftp.NCSA.uiuc.edu 
Windows Lview /Web/Mosaic/Windows/viewers/lviewp1c.zip 
Mac GIF Converter /Web/Mosaic/Mac/Helpers/gif-converter-237.hqx 
UNIX xv /Web/Mosaic/Unix/viewers/xv-3.00.tar.Z 


Not all images should be transparent. Images with one solid color in the back- 
ground convert well. Pick appropriate images to avoid odd transparency effects. 


DiskOpaq.gif 


Open the file you want to con- 
vert. Choose a color you want 
to make transparent. Save the 
file. 
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<HEAD><TITLE>Transperent Graphics</TITLE></HEAD> 
<BODY> 

<H1>Transperent Graphics</H1> 
Most gif file formats are opaque; even the white parts of the image are not 
transparent. Opaque and transparent images are always rectangular. You cannot 
change that. However, silhouetted transparent images seem irregulerly shaped and 
float on the background. 

<P> 

<IMG ALIGN=TOP SRC="DiskOpaq.gif'> Opaque. 

<IMG ALIGN=TOP SRC="DiskTrans.gif"> Transparent 

</BODY> 

</HTML> 











Netscape: Transparent Graphics 


ela= 
as Edit ] Reload | Images | Print Find 
Location: | file :/ / /Macintosh%$20HD /Dean’s /HTML/HTML®20F iles®203rd%20Edtion /!SZOHTMLB 20) 


Transparent Graphics 


Most .gif file formats are opaque; even the white parts of the image are not transparent. Opaque 
and transparent images are always rectangular. You cannot change that. However, silhouetted 
transparent images seem irregularly shaped and float on the background. 


Opaque. Trensperent, 





















Backgrounds 


Browsers display backgrounds in default colors determined by the preference 
settings. Backgrounds are usually gray or white. Since color preferences vary 
from user to user, it is important that you set the background color (see page 44) 
or create a background graphic. 


Background graphics are image files that are repeated like tiles filling the screen 
no matter how big or small the window. Remember large files mean long load 
times. Often backgrounds are textures rather than full-color images. Or if they 
are not textures, they are small simple graphics used to form a wallpaper pattern 
behind the text. 


Be careful about the image you choose for a background. Some images make it 
hard to read text. Transparent graphics designed for monochromatic back- 
grounds won’t look good on background graphics. 


You set the background graphic in the <Body> tag at the beginning of an HTML 
file. If you don’t, the background will be a solid color. 


1 2 3 4 
ph AO hs ke eT 
<BODY Background="Fade.gif" BGProperties =Fixed = 
5 


Start with the <BODY tag. [EJ Put BGProperties = Fixed 
within thr <BODY> tag if 


[Ey Put Background= after the you do not want the back- 
opening <BODY tag. ground to scroll with the 
rest of the screen. Internet 
[EQ Put the graphic file name Explorer only. 


you want as the back- 
ground between the quote © [EJ Close the tag with the > 
marks. symbol. 
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Browsers display backgrounds in default colors determined by the preference settings. 
Backgrounds are usually gray or white. Since color preferences vary from user to user, 
itis important that you set the background color (see page 00) or create a background 
graphic, 

<P> 

Backgrounds graphics ore image files that are repeated like tiles filling the screen no 
matter how big or small the window. Remember large files mean long load times. 
Often backgrounds are textures rather than full color images. Or, if not textures, they 
are small sumple graphics used to form a wallpaper pattern behind the text. 

<P> 

Be careful about the image you choose for 4 background. Some images make it hard to 
read text. Transparent graphics designed for monochromatic backgrounds wont look 
good on background graphics. 

<P> 


You set the background Netscape: Background Graphics 
ou don't, the backgroun 


<BODY> [Retood [images [ rrint [find _] 


</HTML> Location: |file :// /Macintosh%20HD /Dean's /HTML/HTML%20F iles®203rd% 20Edtion /!SZOHTMLB2O0 








Background Sounds 


Browsers can play linked sound files by using helper applications (see page 86) 
or by using embedded applications (see page 98). Internet Explorer recognizes 
the <BGSOUND> tag, which loads and plays a background sound automatically. 
The user does not have to click a link to hear it. Netscape can accomplish the 
same effect by using the <EMBED> tag (see page 98). 


You place the <BGSOUND> or <EMBED> tag in the body of the HTML file. The file 
is sent over the Web along with text and graphics. Remember, sound files can be 
big. Long clips and higher quality mean even bigger files. Big files take a long 

time to transfer over the Web and load for playing. That's why it’s a good idea to 


insert either tag at the end of an HTML file. This way the screen will build text 
and graphics and then load the sound and play it. If you put the tag at the 
beginning, the screen will be blank until the sound file is retrieved. 


The background sound can play once or it can loop for as long as the page is on 
the screen. Internet Explorer plays both sampled (WAV and AU) and MIDI file 
formats. For Netscape, LiveAudio plays WAV, AU, AIFF, and MIDI formats. Of 
course, the user has to have a sound-capable computer system to hear the file 


play. For Internet Explorer: 


1 2 


<BGSOUND SRC="babblingbrook.wav" eee 


For Netscape with LiveAudio: 


25S ee ee eee 
<EMBED SRC="babblingbrook.wav" AUTOPLAY=TRUE LOOP=TRUE> 
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Start with the <BGSOUND 
tag. 


Put name of sound file 
between the quote marks 
as the source of the back- 
ground sound. Think of 
SRC= as meaning source. 


Put the number of times 
you want the sound to play 
after LOOP=. 


Choose INFINITE for the 
sound to repeat 
indefinitely. 


Close the tag with the > 
symbol. 


Start with the <EMBED tag. 


Put name of sound file 
between the quote marks 
as the source of back- 
ground sound. Think of 
SRC= as meaning source. 





Include the AUTOPLAY= 


TRUE argument to have 
the sound start by itself. 


Include the LOOP=TRUE 
argument for the sound to 
repeat indefinitely. 
Choose FALSE for the 
sound to play only once. 
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<HTML> 
<HEAD><TITLE>Background Sound</TITLE> 

</HEAD> 

<BODY> 

This file will play a background sound as long as itis on the screen| 
<BGSOUND SRC="babblingbrook. wav LOOP=INFINITE> 
</BODY> 

</HTML> 









ae — 


fa} ® A wa 


4 Back Forward Siép Refresh Home &, Mal 2 Favorites Larger Smaller 
2 [Address ~w) [file :/77HTMLS20F iles%203rd/ #New%S2OHTML%20F iles%205r d5620E dition /Backgroul 


This file will play a background sound as long as it is on the screen. 
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Lists 


Lists come in two basic varieties: ordered (with numbers, letters, or Roman 
numerals), and unordered (with bullets). Both kinds indent the list from the rest 
of the copy. You can nest lists within each other, as in an outline. 


Identify ordered lists with the paired <OL> tag and unordered lists with the 
paired <UL> tag. Both lists use the <LI> tag for items in the list. The <LI> tag is 
used by itself. 


Menu and directory lists also exist as valid HTML tags. However, most browsers 
do not format these lists differently from ordered, unordered, or glossary lists 
(see page 76). 


You can choose between three types of bullets by including Type= within the 
<UL> tag. Specify disc, circle, or square. Sometimes you see Web documents 
with small graphics in lists instead of bullets. The person who wrote the docu- 
ment inserted small graphics with the <IMG> tag (see page 66). 


You can choose between numbers, capital letters, lowercase letters, and Roman 
numerals by including Type= within the <OL> tag. Specify 1, A, a, or i, respec- 
tively. You can also change the starting point by including Start= within the 
<OL> tag. Type= also works with the <LI> tag. 


1—<OL Type=1 Start=10> 4—<UL Types=circle> El Put the </OL> tag after the 
last item in the list. 
<Li>item <Li>item 
Start by inserting the <UL> 
2 <LI>Item 5 <LI>Item tag in front of the first 
item in the list. Include 
<Li>item <Li>Item the Type of bullet within 
the <OL> tag. 
3———</OL> 6————__ <UL> 


5 | Put the <LI> tag in front of 


every item in the list. 


0D Start by inserting the <OL> [Put the <LI> tag in front of awe ee 


tag in front of the first every item in the list. ; 

item in the list. Include Numbers appear automat- type them In. 

the Type of numbering sys- ically, so you don't need or were. 

tem and the Start number to type them in. Finish by inserting the 


</UL> tag after the last 


within the <OL> tag. item in the list 
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cally, so you don't need to 








07861-33.htm 


















<HTML> 
<HEAD><TITLE>Lists</TITLE></HEAD> 

<BODY> 

<H1>Lists</H1> 

Lists come in two basic varieties: ordered, with numbers and unordered, with bullets, 
Both kinds indent the list from the rest of the copy. 

<P> 

This is an ordered list. It has numbers in front of every list item starting with the 











Netscape: Lists 


[Retoas [mages [ Print [find _] 







This is an unordered list, 



















items.<BR> 5 ; , 

<UL> Location: 
<LI>Item ‘ 

<LI>Item Lists 

<Li>Item _ 

<LI Type=crde>Item }} Lists come in two basic varieties: ordered, with numbers and unordered, with bullets. Both kinds 
sy e=square>Item || indent the list from the rest of the copy. 

< > 

</BODY> This is an ordered list. It has numbers in front of every list item starting with the number ten. 
</HTML> 


This is an unordered list, It demonstrates the different bullets types in front of list items 









® Item 
® Item 
@ Item 
© Item 
O Item 











Glossary Lists (Definition Lists) 


Glossary lists are meant for lists that have two parts, such as a term and its defi- 
nition, but they can be used for any similar situation. Glossary lists don't have 
numbers or bullets, so you need to type them as part of the copy. The <DL> tag 
is used to identify the list, <DT> is used for each term, and <DD> is used for the 
definition part. The <DL> tag is paired; the <DT> and <DD> tags are not. 


<DL>—_—_—___————-1 

<DT>Term————————_2 

<DD>The definition of the term. If the definition is a long 

one, the copy will wrap to fit in the window width. The copy 3 
continues to indent as part of the definition. Each term 

starts on a new line. 
<DT>Term 

<DD>The definition of the term. If the definition is a long 
one, the copy will wrap to fit in the window width. The copy 
continues to indent as part of the definition. Each term 
starts on a new line. 

</DL>——_—_————"-4 





[Start by placing the <DL> E}) Put the <DD> tag in front of 
tag in front of the first every definition in the list. 
item in the glossary list. 

[EJ End by putting the </DL> 

BB Put the <DT> tag in front of tag after the last item in 
every term in the list. the glossary list. 
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07861-34.html 
[fines Ie) lz) ee) Bl) ©) Eas 
==I5) (HS) Ge) Gade) eee | 

























<HEAD><TITLE>Glossanes</TITLE></HEAD> 
<BODY> 

<H1>Glossary Lists</H1> 

Soe» lists are meant for ae that have two parts like a term and its definition, but 






<DT>First Term 
<DD>The definition of the term. If the definition is a long one the copy will rag to fit in} 
the window width. The copy continues to indent as part of the definition. Each term 
starts on a new line. 

<DT>Second Term 

<DD>The definition of the term. If the definition is a long one the copy will rag to fit in| 
the window width. The copy continues to indent as part of the definition. Each term 
starts on a new line 
<DT>Third Term 
<DD>The definition of 4 
the window width. The 4 
starts on 4 new line. 



















ee SS 


Location: — file :// /Macintosh%S20HD /Dean's /HTML/HTMLS20F iles®203rdB20Edtion /!SSZ20OHTMLB 20) 


Glossary Lists 
















Glossary lists are meant for lists that have two parts like a term and its definition, but can be 
used for a similer situation. Glossary lists don't have numbers or bullets 






First Term 
The definition of the term. If the definition is a long one the copy will rag to fitin the 
window width. The copy continues to indent as pert of the definition, Each term starts on 
anew line. 

Second Term 
The definition of the term. If the definition is 4 long one the copy will rag to fit in the 
window width. The copy continues to indent as part of the definition. Each term starts on 
anew line 

Third Term 
The definition of the term. If the definition is a long one the copy will rag to fitin the 
window width. The copy continues to indent as part of the definition. Each term starts on 

anew line 


Document : Done. 
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Special and Reserved Characters 


The only characters you can type in HTML documents are the letters, numbers, 
and symbols that appear on your keyboard. Any character that you type by 
holding down a key other than the Shift key may not work when someone 
views your document over the Web. That’s because not every computer uses the 
same combination of keys to mean the same special character. Bullets, accented 
letters, ©, ™, ®, a, x, £, and ¢ fall into the special character set. 


The HTML language reserves some characters for code only, for example, the ", 
&, <, and > symbols. You cannot type a reserved character directly in the text of 
your document. 


Use named or numbered entities whenever you need a special or reserved char- 
acter in the text of your document. Named entities use abbreviations, while 
numbered entities use the ASCII numbers to indicate the character (see page 193 
for an ASCII list). 


Named Entities EE) Start with an & in front of 
1— alt; 3 the abbreviation. 


. Put the abbreviation next. 


EE] End with a ; (semicolon) 
after the abbreviation. 


Numbered Entities J Start with an &# in front of 
the ASCII number. 


Put the ASCII number 
163;-— 6 next. 


(GJ End with a; after the 
ASCII number. 
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= ie eee SESS Be See 
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|sHTML> 
<HEAD><TITLE>Characters</TITLE></HEAD> 

<BODY> 

<H1>Special and reserved characters</H1> 

The only characters you can type in HTML documents are the letters, numbers and 
symbols thet appear on your keyboard. Any character you type by holding down a key 
other than shift may not work when someone views your document over the Web. 
That's because not every computer uses the same combination of keys to mean the 
same special character. Bullets, accented letters, &#161;, &#247;, &reg,, &copy;, 
&#188;, &#177;, &#163; and &#162; fall into the special character set. 
<P> 











cters by name.<BR> 






<BR> 
&amp;<BR> 
& = <BR> 


Some cheracters by ASCII number.<BR> 
&#163;<BR> 















&#169;<BR> Netscape: Characters 

&#191;<BR> : 
&#241:<BR> ——— Lesit_] (eetcas [images [ print [Find J [Scr ] 
ae Location; [Fte:/7/Macintoshs820HD /Dean’s /HTML /HTMLSE20F iles95203r d¥20E tion /ZOHTML E20] 
< > 





Special and reserved characters 








The only characters you can type in HTML documents are the letters, numbers and symbols that 
appear on your keyboard. Any character you type by holding down a key other than shift may not 
work when someone views your document over the Web. That's because not every computer 

uses the same combination of keys to mean the same special character. Bullets, accented letters, 
j, +, ®, ©,", +, £ and ¢ fall into the special character set. 


Some characters by name. 






> 


& 


” 


[Page 1) Some characters by ASCII number. 
£ 
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Preformatted Type 


A browser normally formats the text in an HTML file and ignores any extra 
spaces, tabs, or line returns you add to the file. The <PRE> tag, howeve:, formats 
the text based on the way you type it. It retains all the spaces, tabs, and returns 
in the HTML file so that it looks exactly the same when viewed with a browser. 
There’s one catch: the text appears in monospaced type, like Courier. Charts that 
don’t use the <TABLE> tag (see page 118) are usually created with the <PRE> 
tag. Always use a monospaced font when creating preformatted text so that the 
spacing reflects the final display in the browser. 


<PRE>——_—__4 
Units sold 


Pencils 
Pads 


Erasers 





Paper clips 600 4000 600 500 400 


</PRE> 


| 
3 


J Start by putting the <PRE> 
tag in front of the text. 


[Put the text you want to 
Style between the tags. 


[Ey Put the </PRE> tag after 
the text. 
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|kHTML> 
<HEAD><TITLE>Preformatted</TITLE></HEAD> 

<BODY> 

<H1>Preformatted type</H1> 

A browser normally formats the text in an HTML file ignoring any extra spaces, tabs 
or line returns you add to the file. The &lt, PRE&gr, tag formets the text based on the 
way you type it. It retains all the space, tabs and returns in the HTML file so it looks 
exactly the same when viewed with a browser, The one catch: the text appears in 
eee type like Courier. 
<P> 





Pencils 
Pads 400 2000 400 300 200 
Erasers 500 3000 500 400 300 
Paper clips 


Netscape: Preformatted —————————_| 


Preformatted type 


A browser normally formets the text in an HTML file ignoring any extra spaces, tabs or line 
returns you add to the file. The <PRE> tag formats the text based on the way you type it It 
retains all the space, tabs and retums in the HTML file so it looks exactly the same when viewed 
with a browser. The one catch: the text appears in monospaced type like Courier. 







This is an example of preformatted text 











Multiple Columns of Text with Netscape 


Normally, text on the screen runs in lines that are as wide as the browser win- 
dow. This means that unless either the copy wraps around graphics or line 
breaks are inserted to shorten the line length, blocks of copy can be very wide. 
In fact, they can be as wide as the user's screen. Most people find long lines hard 
to read. That is why newspapers, magazines, and some books are set with two or 
more columns of text on a page. 


The <MULTICOL> tag creates columns of text without resorting to setting up 

a table. Copy flows from one column to the next, from top to bottom, left to 
right, filling the columns evenly across the screen. To create multiple columns, 
surround text with the opening and closing <MULTICOLS> tags. It is just like any 
other paired text formatting tag. 


There are three arguments to the <MULTICOL> tag. COLS= defines the number 
of columns. GUTTER= defines the size of the space between the columns. 
WIDTH= defines the total width of the columns and gutters combined. Measure 
gutter and width in pixels. 


Fee BR) ia ene 
<MULTICOL COLS=3 GUTTER=10 WIDTH=288> 


This is copy that is broken into three columns. 
Se eee eee ee 


6 
</MULTICOL> 
ree 
7 
(J) Start with the <MULTICOL EE} Include GUTTER-, fol- Close the table with the 
tag to break copy into lowed by a number, with- <MULTICOL tag with the > 
more than one column. in the <MULTICOL tag to symbol. 
set the size of the space 
Include COL-, followed by between columns. [Put the text you want to 
a number, within the appear in columns 
<MULTICOL tag to set the gO Include WIDTH=, followed between the opening and 
number of columns. a number, within the closing <MULTICOL> tags. 
<MULTICOL tag to set the 
width of the columns and Close the table with the 
gutters combined. </MULTICOL> tag. 
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Multicol.htmi 





<HEAD><TITLE>Muluple Columns With Netscape</TITLE> 
> 


</HEAD: 
<BODY BGCOLOR=FFFFFF> 
This is copy thatis only one column wide. It expands to fill the entire width of the 
browser ee 

TICOL =3 Gi R=10 WIDTH=288 
This is mori is broken into three columns. It foo from one column to the next. 
The <B> Gotter</B> i is the space between the columns of copy The width m the 
multicol tag refers to the overal width of all the columns and gutters. This is copy that 
is broken into three columns. It flows from one column to the next. The Gutter is the 
space between the columns of copy The width in the multicol tag refers to the overal 
width of all the columns and gutters. This is copy that is broken into three columns. It 
flows from one column to the next. The Gutter is the space between the columns of 
copy The <B>width</B> in the multicol tag refers to the overal width of all the 
col and gutters. This is copy thet is broken into three columns. It flows from one 
column to the next. The Gutter is the space between the columns of copy The width in 
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</MULTICOL> 


browser window. 
</BODY> 
</HTML> 


the multicol tag refers to the overal width of all the columns and gutters. 


This is copy thatis only one column wide. It expands to fill the entire width of the 


Netscape: Multiple Columns With Netscape 


Lt Pewee [Reoad [rages | Open | Pret] et | 
























window. 


This is copy that is only one column wide. It expands to fill the entire width of the browser 
window. 


Gutter is the spece 


broken into three between the of all the columns 
columns. Itflows columnsofcopy and gutters. This 
fromone column The width in the is copy that is 
to the next. The multicol tag refers broken into three 
Gutter is the to the overal width columns. It flows 
space between the ofallthecolumns fromone column 
columnsofcopy andgutters. This to the next. The 
The width in the is copy that is Gutter is the space 
multicol tag refers brokeninto three between the 
to the overel width columns. Itflows columns of copy 
ofallthe columns fromonecolumn The width in the 
and gutters. This to the next. The multicol tag refers 
is copy that is Gutter is the spece to the overal width 
broken into three = between the of all the columns 
columns. Itflows columnsofcopy and gutters. 

The width in the 

maulticol tag refers 


This is copy that is only one column wide. It expands to fill the entire width of the browser 


to the overal width 















Sound and Video with Helper 
Applications 


It is possible to include sound and video in your HTML documents. You insert 
sound and video files as you do linked text or graphics. 


Although many browsers are adding sound and video extensions, most browsers 
do not play sound or video, they only retrieve the file. Another program takes 
over from there, and that’s one of the problems. You don’t know if the people 
trying to see or hear your file have the right software and hardware. If they do, 
it is still hard to choose a file format available for all platforms. The best you can 
do is tell them the file format you picked and let them determine whether or 
not they can use it. 


There are very few cross-platform file formats. For sound, AIFF for the 
Macintosh and WAV for Windows are common formats. For video, the MPEG 
format is common and viewers are available for Windows, Mac, and UNIX. 
QuickTime is also a common format that can be viewed in Windows and Macs. 
You may opt for other formats, just remember to mention whichever you 
choose in the text. 


Remember sound and video files are big. Long clips and higher quality mean 
even bigger files. Big files take a long time to transfer over the Web. That’s why 
it’s a good idea to put the file size in the text so people know how long the file 
takes to load. 


1 3 
epee oe 
<A HREF="Ocean.qt">Surf movie, (Mac QuickTime, 525k)</A> 
pte i 


EE Start with the opening tag | 3 | Put the text you want peo- gO End with a closing tag 
<A HREF= in front of the file ple to click between the > </A> after the text. 
name. and < symbols. Include 

the file size and format. 

A) Put the file name of the 
sound or video between 
the quote marks. 
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<HEAD><TITLE>Sound/Video</TITLE></HEAD> 
<BODY> 

<H1>Sound and Video</H1> 

Itis possible to include sound and video in your HTML documents. Browsers do not 
play sound or video, they only reteve the file. Another program takes over from there. 
<P> 

Yes insert sound and video files as linked text or graphic. 


Chek <A HREF="Ocean.snd">Surf sound,</A> (Mac SND formet, 175k) to hear the 
ocean waves. 


Click <A HREF="Ocean.gt">Surf movie,</A> (Mac QuickTime format, 525k) to see 
the ocean waves. 
</BODY> 
</HTML> 

















SSS Netscape: Sound/Video 


[Reeat [images | Print [Find | 
Location: [rie of ¢ /MacintoshS2Z0HD /Dean's /HTML/HTMLS20F ilesS203rdB20Edtion /!SZ2OHTML BO} 


Sound and Video 


Itis possible to include sound and video in your HTML documents. Browsers do not play sound 
or video, they only retrieve the file. Another program takes over from there. 





You insert sound and video files as linked text or graphic. 


Click Surf sound, (Mac SND formet, 175k) to hear the ocean waves. 


Click Surf movie, (Mac QuickTime format, 525k) to see the ocean waves. 





Using Video with Internet Explorer 


Internet Explorer has an extension to the <IMG> tag that allows you to insert 
video files in Web pages. The DYNSRC= argument works with an embedded 
video application or, more commonly, with a system extension like QuickTime. 


The DYNSRC= extension is very new and some of the arguments to it are buggy. 
Below is a description of the basics; how to insert, start, and loop the video. 
Other arguments include LOOPDELAY:=, which pauses between each playback, 
and CONTROLS, which adds a control panel to the video image. VOLUME= is 
sure to be added in the future. You can define the size of the video image by 
using the WIDTH= and HEIGHT= arguments to the <IMG> tag. However, picture 
resolution is predetermined by the original file. Usually, quality suffers when 
changing size. 


1 2 3 “ 
<IMG DYNSRC="RouletteWheel.mov" START=MOUSEOVER LOOP=3> 
5 








a Start with the <IMG tag to B Include START= to define oO Include LOOP=, followed 


insert a graphic; see page when you want the video by a number, within the 
64. to begin playing. Choose <IMG tag to define how 
OPENFILE to start automat- many times the video 

include DYNSRC= and the ically or MOUSEOVER to replays. Choose any num- 

name of the video file Start when the user points ber or use INFINITE to have 

within the <IMG tag. Put to the graphic. the video play repeatedly 

the file name in quotes. until a new page is 

Think of DYNSRC as loaded. 


meaning dynamic source. 
8 Close the <IMG tag with 
the > symbol. 
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HTML> 
<HEAD><TITLE>Video in Explorer</TITLE> 


</HEAD> 

<BODY BGCOLOR=FFFFFF> 

aH Tass video file ee when the mouse aes the eee </H1> 
PNSRi R 





Video in Explorer 


er Ft O@eso em A & 


© Back forward Stop Refresh Horse Search Mail News Favorites Larger Smaller 


Z 


This video file plays when the mouse is 
over the image. 









file:///LBP%20B /Video®20inS20Explorer 
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Image Maps—uUsing CGI Scripts 


Normally, clicking any spot on a linked graphic is the same as clicking any 
other spot. One link per graphic is the rule. But with server-side image maps, a 
graphic contains more than one link. Clicking different spots takes you to dif- 
ferent files. To function properly, image maps require several files and a gateway 
script to run on the server. 


First, choose the graphic for the image map. Not every graphic is appropriate for 
mapping. Choose graphics that have clearly defined sections or labels. Prompts 
in the text help clarify that the image on the screen contains multiple links. 


Next, create a file containing the coordinates of the different sections of the 
graphic. If the shape is circular, specify the center of the circle and the radius. 

If the shape is rectangular, specify the upper-left and lower-right corners of the 
rectangle. If the shape is a polygon, specify all corner points. If the shape is a 
single point, specify the point. The upper-left corner of a graphic is 0,0. The for- 
mat of the coordinates is different, depending on the type of server used. If 
shapes overlap, their order in the coordinate file determines which lies on top. 


Last, you need a gateway script available on the server that takes the mouse 
click coordinates from the browser, looks them up in the coordinate file, and 
opens the correct link. 


The link EE) Start by creating a link. 
l < Put the URL of the gate- 
<A HREF="../cgi.bin/hotimage/map/cube.map"> way script you need here. 
4 5 Ey Put the complete URL of 
Se eS ee eealinpinc the file containing the 
<IMG SRC="cube.gif" ISMAP> map coordinates here. 
6 
yy insert a graphic. 
</A> 


Ee include the argument 


: . : ISMAP so that the browser 
The Coordinate File Following the CERN Standards ies tend eae 


7 click coordinates to the 
8 gateway script. 
polygon (150,46) (193,46) (146,93) (46,93) 
http://myDomain/myfolder/top.html 
SF? 


[Gy End with the link’s closing 
tag. 





polygon (193, 46) (193, 144) (146, 93) (46, 
93) http://myDomain/myfolder/top.html 


rectangle (46,193) (146, 93) (146, 193) (46, 
193) http: // myDomain/myfolder/top.html 


The Coordinate File Following the NCSA Standards 


10 11 


eee Res ee ee ee 
polygon hitp://myDomain/myfolder/top.html 
150,46 193,46 146,93 46,93 
—S> 

12 
polygon http://myDomain/myfolder/top.html 
(193, 46) (193, 46) (146, 93) (146, 93) 


rectangle http://myDomain/myfolder/top.html 
(46, 93) (146, 93) (146, 193) (46, 193) 
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|cHTML> 
<HEAD><TITLE>Meps</TITLE></HEAD> 
<BODY> 

<H1>Image maps</H1> = 
Normally clicking on any spot on a linked graphicis the same as clickin} J ——— 
One link per graphicis the rule. But with image maps a graphic contein| 
ink. Clicking on different perts link to different files. 

















<P> 
<B>Click on a part of the cube for a closer look </B> 


<A HREF=" pe earns lnep cae map"> 
aoe SRC="cube gif’ ISMAP> 






Image maps 


different parts link to diferent fles 


The coordinates used in the 
CERN and NCSA standards 
above describe the square 
face of the cube. 


— Netscape: Maps 


oar tael ad aiemineied =] 


oation: [file :// /Macintosh%20HD /Dean's /HTML /HTML&2OF iles%203r d%620Edtion /1S.20HTMLB20 


Normally clicking on any spot on a linked graphicis the same as clicking o mainte Oe link per 
graphics the rule. But with image maps a graphic contains more than one link. Clic 


Glick on a part of the cube for a closer look. 





Writing HTML 


Start with the type of 
shape. 


[EE] Put each coordinate need- 
ed to describe the shape 
between parentheses. 


EE] End with the complete 
URL of the linked file. 


EI) Start with the type of 
shape. 


Gi) Put the complete URL of 
the linked file next. 


FZ End with each coordinate 
needed to describe 
the shape. Do not use 
parentheses. 
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Image Maps—using Browsers 


User-side image maps are similar to server-side image maps (see page 90) in that 
they contain more than one link per graphic. Clicking different parts takes you 

to different files. Image maps require several files and a gateway script to run on 
the server; however, user-side image maps do not because they work on the user 
side. The mouse click coordinates are interpreted by the browser and not by the 
server. This saves transfer time and eliminates the need for gateway scripts that 

interpret image map coordinates. Remember, not all browsers support use maps. 


First, choose the graphic for the user-side image map. Not every graphic is 
appropriate for mapping. Choose graphics that have clearly defined sections or 
labels. Prompts in the text will help people understand that the image on their 
screen contains multiple links. 


Next, create a <MAP> tag within the same HTML file that contains the coordi- 
nates of the different sections and the links. If the shape is circular, specify the 
center of the circle and the radius. If the shape is rectangular, specify the upper- 
left and lower-right corners of the rectangle. If the shape is a polygon, specify all 
corner points. If the shape is a single point, specify the point. The upper-left 
corner of a graphic is 0,0. If shapes overlap, their order in the coordinate file 
determines which lies on top. 












SS__]]_=_]=—_]_]_]S=j|= Imag eMapsWithBrowsers. html 
Se se ee) ee ee @) Ee 
5 Se ee ee eae 
fens is) ESS) CSS Ge (it beet ae | 


















<HTML> 
<HEAD><TITLE>Image Maps for Browsers</TITLE> 
</HEAD> 








=MAP NAME="NavigatonBar’> 

<AREA SHAPE="RECT" COORDS=" '5,6,90,63" HREF ="Contents huml"> 
<AREA SHAPE="CIRCLE" COORDS="126,35,32" HREF="Home hunl"> 
<AREA SHAPE="POLYGON" COORDS="192,8,233,60,155,60" 

HREF ="Index huml"> 

<AREA SHAPE="RECT" COORDS="0,0,300,79" NOREF> 

</MAP> 























<IMG SRC="NavigationBar. gif USEMAP="#NevigationBar"> 
5 graphic will not need to send any mformation to the server to Wo! 
will ape the coordinates 
</BOD' 4 ge Maps for Browsers 


STM: 
sem Der] (eons [rors [ret [Fe 
Location: [me 2/1 (MacintoshS20HD /Dean's /HTML. 7HTMLS%20F iles%203r d%20E dtion /!S2OHTMLS] 










Contents 


This grephic will not need to send 
any information to the server to work. The browser will interpret the coordinates. 
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1 
Ore 
<MAP NAME="NavigationBar"> 


3 4 


Writing HTML 


6 
Seem peers es 5 Spee af ga 8 es ee 
<AREA SHAPE="RECT" COORDS="5,6,90,63" HREF="Contents.html"> 


<AREA SHAPE="CIRCLE" COORDS="126,35,32" HREF="Home.html"> 


<AREA SHAPE="POLYGON" COORDS="192,8,233,60,155,60" 
HREF="Index.html"> 


een ee ee ee 
<AREA SHAPE="RECT" COORDS="0,0,300,79" NOHREF> </MAP> 


a 


Start with the opening 
<MAP tag. 


Put the name of the use 
map within the quote 
marks. 


Start each section of the 
use map you define with 
the <AREA tag. 


Put the shape of the area 
within the quotes that fol- 


low the SHAPE= argument. 


Choose RECT, CIRCLE, 
POLYGON, or POINT. 


10 11 


Put the coordinates of the 
shape within the quotes 
that follow the COORDS= 
argument. 


Put the URL of the link 
within the quotes that fol- 
low the HREF= argument. 


If the shape has no link 
put NOHREF instead of 
HREF and the URL of the 
link. 


Close the definition of the 
use map shapes with the 
</MAP> tag. 


12 
poorer fe ele Bo 
<IMG SRC="NavigationBar.gif" USEMAP="#NavigationBar"> 


Insert the graphic using 
the <IMG> tag (see page 
64). 


Include the argument 
USEMAP so that the brows- 
er knows to use the mouse 
click coordinates with the 
map tag coordinates. 


Put the name of the map 
preceded by a # symbol 
within the quotes that 
follow the USEMAP= 
argument. 


Close the <IMG tag with 
a> symbol. 





Scripts Within HTML Documents 


Scripts are programs that are typed as part of HTML documents. They add func- 
tion to Web pages that is not possible with standard HTML tags. Scripts are simi- 
lar to external applications but must be written in a language that the browser 
can understand. This means JavaScript for Netscape, VBScript and JScript for 
Internet Explorer. Both of these are based on, or subsets of, larger programming 
languages; Java and Visual Basic. The scripting languages are limited so pro- 
grams cannot be created that do harm to the user's computer. 


Place a script within the <HEAD> of the HTML file. A script loads as the file is 
read by the browser. The script runs when an event placed somewhere else in 

the file is triggered. In the following example, the event onLoad is put within 
the <BODY> tag so that the script starts immediately. Events also can be clicks 
or rollovers. 


To learn more about writing your own scripts in JavaScript or VBScript, visit 
Netscape's or MicroSoft's Web sites. Many scripts are made public on the Web. 
Use a search engine to locate them. 


1 


— 

<HEAD><TITLE>Script</TITLE> 

ag a a ae 

<SCRIPT LANGUAGE="JavaScript"> 
4 

SSS 

<!Lines of script go here.> 


ee, 
</SCRIPT> 
6 


et 
</HEAD> 
7 


eS 
<BODY onLoad='"scroll_start();" onUnload="scroll_stop();"> 


Ei] Start with the <HEAD> tag.  Z] Put the entire script End the script with the 
between the comment closing </SCRIPT> tag. 
Ey Put the <SCRIPT tag within tags. This way, browsers 
the <HEAD> of the file. that don't recognize the 6 End the head with the 
script tag will ignore the closing </HEAD> tag. 
EE) Put the name of the script. 
scripting language Put an event somewhere 
between the quote marks. in the file to trigger the 
Choose JavaScript for script. 
Netscape and VBScript for 
Internet Explorer. 
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SSS crip SSS eee 
i fre Le Je BZ a eres lal TS Cees io 
Por) best) am fy 






















scrollOn = false; 


function scroll_start() 






vari=0; 
scroll_stop(); a yihing el 
msg="l'd rather be doing almost anything else," 
acer Wouldn't you?"; 

for (I = 0;i< maxspci++) msg=""+msg; 
scrollOn=te; 
timerid=window.setTimeout("scroller(0)",waitfor); 












SS ee es = 


Location: SS SS : 
If you look really closely, you'll notice 
a small line of copy scrolling across the 
browser screen in the message box area 


at the bottom of the window frame. 




























: 
fonction scroller(pos) 













ver out = 
scrollOn=false; 

if (pos < msglength) window. stetus = msg. 
substring(pos, msg.length); 

else pos=-1; 

++pos; 

scrolOn=true; 
timerid=window.setTimeout("scroller("+pos+")", 
waitfor); 


wm, 
















Java Applets—Using External 
Applications 


External applications are mini-programs, called applets, that are written in the 
Java programming language. They add function to Web pages that is not possi- 
ble with helper applications, plug-ins, or CGI scripts. If you have a Java- 
enhanced browser, chances are you have seen a Java applet. They can be games, 
stock tickers, animations, or calculators. You name it—Applets are limited only 
by a programmer’s talent and the safeguards built into the Java interpreter. 
Safeguards prevent talented but evil programmers from creating applets that can 
do damage to a user’s computer. 


Although applets are written in Java, they are not typed into the HTML file 
using the <SCRIPT> tag (see page 94). Instead, applets sit on the server with the 
rest of the files that may be necessary for a Web page (for example, graphics, 
sound, video). The browser retrieves the source code just like a graphics file. The 
Java-enhanced browser then interprets the code and displays the applet on the 
screen. 


Use the <APPLET> tag to insert an applet in your HTML file. The only argu- 
ments needed within the tag are CODE=, which identifies the source file, and 
WIDTH= and HEIGHT=, which create a rectangular space for the applet. 
<PARAMs is an associated tag that passes information to the applet. You control 
aspects of the applet with NAME= VALUE= pairs included within the <PARAM> 
tag. Not all applets need parameters—check the documentation of the applet 
you are using. 


Writing an applet goes beyond the scope of this book. For more on the subject, 
try Special Edition Using Java (Que, 1996). Many applets are also available pub- 
licly. Search the Web for applet archives and documentation. 


Mik IME, lcd rite! oe Smet 


<APPLET CODE="AllLights.class" WIDTH=280 HEIGHT=200> 
<PARAM NAME=COLOR VALUE="YELLOW"> 

<PARAM NAME=LOOSERTEXT VALUE="Try again later."> 
sia to NAME=WINNERTEXT VALUE="Nice going."> 


—_—_1___. 
</APPLET> 
96 





















SEIS GZ GS Sas oo 
=e peat Pee ee eet) beat a 


Writing HTML 






Applet.htmi 








<HTML> 
<HEAD><TITLE>Applets</TITLE> 
</HEAD> 

<BODY BGCOLOR=FFFFFF> 


<H1>This is a Java applet that runs in the browser. Its a puzzle </H1> 
<APPLET CODE="AllLights.class"> 
APPLET> 












3S netscape: Applets == 


Back [For vara] Home } [Retosd [images [ open [Print [Find }] se] a 


Location: | file: Wa ae html 


This is a Java sade a that runs in ate 
browser. Its a puzzle. 

















EE Start with the <APPLeTtag [EJ Create aspace in which [EJ _If the applet requires 
to insert an external 
application. 


Include CODE= and the 
name of the file within 
the <APPLET tag. Put the 
file name in quotes. 


the applet appears by parameters to work, 
including the WIDTH= and include the <PARAM> tags 
HEIGHT= arguments, fol- between the opening and 
lowed a number. Measure closing <APPLET> tags. 
in pixels. 

[GB] Close with the </APPLET> 
Close the opening tag. 
<APPLET tag with the > 
symbol. 
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Plug-Ins—Using Embedded Applications 


HTML and the Web started as a way of accessing text and graphics through a 
point and click interface. However, as Web surfing grows and large corporate 
sites go online, there is a drive to go beyond the basics. Today, Web pages are 
expected to deliver sound, video, and custom applications. JavaScript and 
VBScript add power to browsers. Programmers can write their own applets and 
novices can use publicly available applets (see page 96). Another way to keep up 
with the Websters is to use helper applications, or plug-ins. 


Helper applications are standard software that a user might have for other pur- 
poses. Plug-ins are more like system extensions. Instead of launching a separate 
application and opening a file from within that application, plug-ins are, in a 
way, already loaded when the browser starts up. They work like plug-ins for 
other software (for example, QuarkXpress, Photoshop). The browser looks to see 
which plug-ins are available when it launches and then uses these plug-ins for 
added functionality when called upon by the <EMBED> tag. 


Netscape and Internet Explorer have different plug-ins for the same functions. 
So, you have to deal with cross-platform issues. Even control arguments can dif- 
fer for two similar plugs-ins on the same platform. One strategy is to tell users 
which browser to use for optimal viewing of your site. Another strategy is to 
write code for the plug-ins that ship with the browser you prefer. 


The <EMBED> tag is how you use these plug-ins. For example, you can insert a 
sound in Netscape by using the LiveAudio plug-in. The tag identifies the sound 
file. The browser automatically uses LiveAudio to play the sound. LiveAudio 
gives you HTML arguments to display a control panel, preset the volume, deter- 
mine when the sound starts playing, and how many times it repeats. With these 
controls, it is possible to create a background sound in Netscape without using 
the <BGSOUND> tag, which only Internet Explorer supports (see page 74). Just 
set the AUTOSTART= and LOOP= arguments to TRUE. 


The <NOEMBEDs> tag displays alternate text if the browser does not support 
plug-ins. Usually, a text link downloads a file to the user's computer for use with 
a helper application. 


1 2 


—l___. 


ee 
<EMBED SRC="HornFanfare.aiff" 


CONTROLS=CONSOLE VOLUME=50 AUTOSTART=TRUE LOOP=TRUE 





Writing HTML 


4 5 


st 
WIDTH=144 HEIGHT=60> 


<NOEMBED> 
ZO Control the size of the 


6 plug-in when a control 
panel is displayed with 
the WIDTH= and HEIGHT= 
arguments. Measure in 
pixels. 


<A SRC="HornFanfare.aiff"> 


Play the music with a helper application.</A> 


EX) Start with the <EMBED tag EJ Include within the <emBeD ([E)_Close the <EMBED tag with 


EZ include SRC= and the 


name of the file that uses 


tag any other plug-in 
arguments needed to 
set variables. Check 
documentation for each 


the > symbol. 


Put a link (in this case 
explanatory text) between 





the plug-in within the plug-in. the <NOEMBED> and 

<EMBED tag. Put the file </NOEMBED> tags for 

name in quotes. browsers that do not sup- 
port plug-ins. 


oe epee gg htm! =— 








|kHTML> 
<HEAD><TITLE>Embed</TITLE> 
</HEAD> 

<BODY BGCOLOR=FFFFFF> 
<H1>This embedded object is an extension, or "plug-in", to the browser.</H1> 
<EMBED SRC="HortF anfare. aiff" 

WIDTH=144 HEIGHT=60 

CONTROLS=CONSOLE VOLUME=50 AUTOSTART=TRUE LOOP=TRUE> 
<NOEMBED 

<ASRC="HoroF anfare. aiff’> 

Play the music with 4 helper epplication. </A> 

</NOEMBED> 
</BODY> 




















Netscape: Embed == 


What’s New? | | What’s Cool? || Destinations Net Search 


This embedded object is an extension, 
r "plug-in", to the browser. 











What Is a Form? 


A form is a special part of the body of an HTML document. It allows users to 
input text and make choices from check boxes, radio buttons, and selection 
lists. You design forms for your specific purposes by combining these input 
types. 





= Netscape: Order Form Forms are often literally just 
4 Sto that, forms for gathering infor- 
Location [Fe:/7 /Miacintoshs820HD /Dean's HTML /HTMLS620F Nless®203rd%20Edtion /!620HTML20]] mation. Purchase orders, reg- 
@rdeetann istration cards, applications, 


and exams all fall into this cat- 
Name: LICL. . i 


egory. The browser sends the 
Billing address . F 
user input to an e-mail 
How many of each do you want to order? address. 


Which credit card do you want to use? 
Visa 

OMasterCard 

© American Express 


Credit card account number 
Expiration date (month/year) 
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ee 4 


Location : | file :///MacintoshS20HD /Dean's /HTML. dee ed 


Search for articles 


Enter the word you want to search for in the ttle of the erties in the index. 


eer a Ear ae 





eee Dialog 


Looation: [file :///MacintoshS%S20HD /Dean's /HTML /HTML%20F ilesS203r dS 20Edtion /!S2OHTML 20] 


Before you go on... 


Pick aleve of aye Beger 





Forms are used for defining 
search parameters. The browser 
sends the input to the server for 
processing. The result returns 
for display on your screen. 


Forms are used for dialog 
boxes. A choice defines which 
branch of a document you 
enter. 
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How Forms Work 


A form works in conjunction with a gateway script on a server to process the 
information submitted to it. Writing scripts requires a higher level of program- 
ming expertise than what is covered in this book. A good source for getting 
started with gateway scripts is Que’s Special Edition Using HTML 3.2, Third Edition 
by Tom Savola. 


If you don’t know any programming languages except HTML, you will find it 
easier to ask for help from the staff at your server. Ask the staff if they have a 
script you can use. 














When a person fills out a form 
and clicks the Place This Order 
button, the browser sends (or 
posts) the information in the 
form to a gateway script run- 
ning on the server for process- 
ing. 








d Horne] = a Print I Find | a 
Location: [file :///Macintosh9620HD /Dean's /HTML/HTML%20F iles% 203r 4% 20E dtion / S520HTML%20) 


Order form 





| 


Name: 
Billing address 


How many of each do you want to order? 
Pens 
[Pencils 





Which credit card do you want to use? 
Visa 

© MasterCard 

© American Express 


Credit card account number 
Expiration date (month/year) 


[ 














[stoompentibere, aT 
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Information passed from the 

browser to the server is 
processed by a gateway script. 
The processed information is 
sent back to the browser or for- 
warded to another location. 











Basic Form Programming Elements 


You must place a form inside the body of an HTML document. That means that 
every form has all the same tags required at the top and bottom of any other 
HTML document (see page 20). 


Forms consist of three basic parts: the opening tag, the input types, and the sub- 
mit button. The opening tag, <FORM>, defines the method by which the infor- 
mation gets to the gateway script and the name of the script itself. Input types, 
using the tag <input type>, include text fields, check boxes, radio buttons, 

and selection lists (see pages 106,110-114). A special input type, hidden, allows 
you to include additional information in the form to the gateway script. The sub- 
mit button, <input type=submit value=“Submit”>, is used to send the choices in 
the form to the gateway script. An image map also can function as a graphic 
send button and link (see page 116). Additionally, a cancel button, <input 
type=reset value=“Clear”>, is used to clear or reset default choices in the form. 


You can put more than one form in an HTML document and any number of 
input types within a single form. However, you cannot nest forms. 


1 2 3 
ae |, oe ES eee 


<FORM METHOD="POST" ACTION="/bin/who"> 
4 


ee ee eS a ee ee 
<input type="hidden" name="WhoForm" value="ShortForm"> 
5 


eS 
Last name: <input type="text" size=40 name="last"> 
6 7 


= eS eee 
<input type=submit value="Continue"> 
8 


sl 5 alge ie ee 
<input type=reset value="Clear"> 
10 
eee te 
</FORM> 
1 | Start the form with the Ei Put the URL of the gate- Oo Put the input type hidden if 
<FORM> tag. way script that you want you want to send addition- 
to process the information al information to the CGI 
2 | Use POST for the method between the quote marks script that the user does 
of submitting the informa- as the action. not see. 


tion to the gateway script. 
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Put all other text and input Put the copy you want to [E)) Put the copy that you want 


types after the opening appear in the submit but- to appear in the reset but- 
tag. ton between the quote ton between the quote 
marks. marks. 
[Gy Put a submit button in 
your form to send the i Put a reset button in your 10 End every form with 
information to the gate- form to clear the form. </FORM>. 
way scripts. 






07861-42.html 


“CIs ww SS (SEs 
= es See | Celetatet iy Geleal =) mae 



























<TITLE>Name Please</TITLE> 
</HEAD> 
<BODY> 
<H1>Who are ee </H1> 


<FORM METHOD= "POST" ACTION= “Pbintwho"> 

First name:<BR> 

<input type="text" size=40 name="first"><BR> 

Last name:<BR> 

<input type="text" size=40 name="last"> 

<P> 

<input type=submit value="Continue"> 

ae type=reset value="Clear"> 
<i 




















= Netscape: Name Please 


Location: [me 47 /Macintosh%20HD /Dean's /HTML/HTML%20F iles%203rdS20Edtion /!S20HTMLB20 
Who are you? 














Please let us know your name before you continue. 







First name: 





Last name: 


OR eee 
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Text Fields 


Text fields in forms enable a person to enter a word, phrase, or series of numbers. 
Text appears in the field when entered by the user. If you specify password as 
the input type instead of text, bullets hide anything entered from view. 


You must include a size and name for each text field. Optional parameters 
include setting a maximum length for input and the default value of the field. 
The default value shows up in the field when the form first loads or when the 


reset button is pressed. 


The browser sends the information in the field when the user clicks the submit 
button in the form. It attaches the name to the information in the field as an 


identifier. 


1 2 


J Le 
<input yer ee 
3 


5 6 


a SS eee eee 
size="20" pee maxlength="10" value="Last name"> 
a 


7 
(RRR 
<input type="password" size="20" name="pass" maxlength="5"> 


[Start with the <inputtag, (fy 
[Put text between the 

quote marks as the type of 

input. 


Put the length of the text 
field you want between 
the quote marks as the 
size. 
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End with a closing > 
symbol. 


Put a label you want 
attached to this informa- 
tion between the quote 
marks as the name of 
input. 


IE] Use password between the 
quote marks as the type if 
you want the input to 
appear as bullets on the 
screen. 


Put the maximum number 
of characters allowed in 
the field between the 
quote marks as the 
maxlength. 


Put the copy you want to 
use as the default for the 
field between the quote 
marks as the value. 
























7861-435.html 


HEAD> 
<TITLE>Text Fields</TITLE> 
> 
<BODY> 
<H1>Text Fields</H1> 
<FORM METHOD="POST" ACTION="/bin/who"> 


Type your password in the field below. Limit 5 characters. 
<P> 


<input type="password" size="20" name="pass" maxlength="5"> 
<HR> 





<input type=submut value="Submit "> 
<input type=reset value="Clear"> 
</FORM> 


<(BODY> Netscape: Text Fields 


re L Back JForwara] Home] [Reload | images | Print_[_Find_] 
Location: | file :/ / /Macintosh%$20HD /Dean's /HTML/HTML%20F iles @203rd% 20Edtion / IS 2OHTMLB2O! 


Text Fields 


Type your last name in the field below. If itis longer than 10 letters please shorten. 


Last name 


Type your password in the field below. Limit 5 characters. 


eon 
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Text Areas 


Text areas are similar to text fields in forms. Text areas have scroll bars and text 
fields do not. With a text area, a person can type more information than usually 
fits in a text field. 


You specify a name for each text area as well as its height and width dimensions. 
ROWS defines the height and COLS defines the width. You can include default 
text as part of the <TEXTAREA tag. It will appear in the text area when the 
page first appears on-screen. 


You can also control how text wraps as it is typed in a text area by including the 
WRAP2= argument within the <TEXTAREA tag. When wrapping is off, text 
continues as one long line beyond the width of the text area, causing the user 
either to break the lines with the Enter key or to scroll horizontally to read the 
text. By setting the wrap to either WRAP=Virtual or WRAP=Physical, text 
automatically breaks at the width of the text area, just as you would expect it to. 


By setting the wrap to WRAP=Virtual, no line breaks are sent to the server 
when the Submit button in the form is clicked. By setting the wrap to 
WRAP=Physical, all line breaks are sent to the server when the Submit button 
in the form is clicked. This can be important when processing the information. 


The browser sends information in the text area to the server when the Submit 
button in the form is clicked. It attaches the name to the information in the 
field as an identifier. 


<TEXTAREA NAME="Resume" ROWS=10 COLS=60 WRAP=Virtual> 
Type your resume in this field.</TEXTAREA> 


6 Puta label you want EE} Put the type of text wrap- 
attached to this informa- ping you want after the 
tion between the quote WRAP= argument. Choose 

1 | Start with the <TEXTAREA marks as the name of between Virtual, Physical, 
tag. input. or Off. 
EE) Putthe height of the text © [GJ Put the copy you want to 
area as the ROWS. use as the default text 
between the > symbol and 
oO Put the width of the text the closing </TEXTAREA> 


108 area as the COLS. tag. 














<TITLE>Text areas</TITLE> 
</HEAD> 

<BODY> 

<H1>Text Areas</H1> 
<FORM METHOD="POST" ACTION="/bin/resume"> 


<P> 
REA NAME="Resume" ROWs=10 COLS=60 WRAP=virtual>Type your 
resume in this field. 

























[You can also control how text wraps as itis entered in a text area by including the 

‘= argument within the TEXTAREA tag, This is important for two reasons. 
The first reason controls the annoyance factor of the default wrapping, which is 
WRAP=Off. When wrapping is off, text will continue as one long line beyond the width 
of the text area. The user must break the lines by typing the retum key and scroll to 
read the text. By setting the wrap to WRAP=Virtual or WRAP=Physical, text will 
automatically break at the width of the text area just the way you would expect it to. 
The second reason controls how the information m the text area is sent when the 
submit button in the form is clicked. By setting the wrap to WRAP=Virtual, no line 
bresk are sent when the submit button in the form is clicked By setting the wrap to 
WRAP=Physical, all line breaks are sent when the submit button in the form is 
dicked. This may be an important factor when processing the information. 

‘AREA> 










< 
<P> 
<input type=submit value="Submit "> 
<input type=reset value="Clear"> 

</FORM> 



















Netscape: Text areas 


a 
[Reload [images | Print | Find ] [stor ] 
Location: [Ftes///MacintoshS820HD /Dean's/HTML /HTMLSS2OFies56203 520E dtion/ RE2OHTMLSS] 


Text Areas 










Type your resume in this field. 
fe can also control how text wraps as it is entered ina 
text area by including the WRAP= argument within the 
TEXTAREA tag. This is important for two reasons. 

The first reason controls the annoyance factor of the 
default wrapping, which is WRAP=0ff, When wrapping is off, 
text will continue as one long line beyond the width of the 
text area. The user must break the lines by typing the 















109 





Radio Buttons 


Radio buttons allow a person to choose one item from a list. When you choose a 
radio button, the browser automatically deselects any other radio button you 
previously selected. 


You must include a name and value for each radio button. The default selection 
shows up in the field when the form first loads or when the user clicks the reset 
button. The browser sends the name and value for each radio button when the 
user clicks the submit button in the form. 


<UL> —1 
3 4 5 6 7 
pa ALIN Ste att | hh 
<input type="radio" name="card" value="Visa"checked>Visa<BR> 
2 <input type="radio" name="card" value="MasterCard">MasterCard<BR> 


<input type="radio" name="card" value="Amex">American Express<BR> 


</UL>—8 
Ey Start by creating a list. EE] Put the same text for the GG Set the default as select- 
name between the quote ed by including the word 
B Put the input tag in front marks for each radio but- checked. 
of each radio button. ton in the list. 
Put the copy you want to 
& Type radio between the @ Put the text you want appear next to the radio 
quote marks as the type of attached to this selection button after the closing > 
input. between the quote marks symbol. 


as the value. 
EE) End the list with the </UL> 
tag. 
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07861-45.html 


os aa 


<TITLE>Radio buttons</TITLE> 
</HEAD> 

<BODY> 

<H1>Making one choice</H1> 

<FORM METHOD="POST" ACTION="/bin/card"> 
Which credit card do you want to use?<BR> 


Making one choice 


Which credit card do you want to use? 


© MasterCard 
© American Express 








Check Boxes 


Check boxes allow a person to choose one or more items from a list. When you 
choose a check box, the browser leaves selected any other check boxes you pre- 
viously selected. 


You must include a name and value for each check box. The default selection(s) 
shows up in the field when the form first loads or when the user clicks the reset 
button. The browser sends the name and value for each check box when the 
user clicks the submit button in the form. 


<UL>—1 3 4 5.6 7 
ares 


<input type="checkbox" name="Book1" value="Yes" checked>Book 1<BR> 







<input type="checkbox" name="Book2" value="Yes">Book 2<BR> 


<input type="checkbox" name="Book3" value="Yes">Book 3<BR> 


</UL>—8 
Start by creating a list. 5 | Put the same text for the Put the copy you want to 
value between the quote appear next to the check 

Qi Put the <input tag in front marks for each check box box after the closing > 

of each check box. in the list. symbol. 
| 3 | Put checkbox between the Gg Set the default for each Bi End the listwith the </UL> 

quote marks as the type of check box you want tag. 

input. selected by including the 


word checked. 
[Put the different text for 
the name between the 
quote marks for each 
check box in the list. 
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resi 46.htmi 


<TITLE>Check boxes</TITLE> 

</HEAD> 

<BODY> 

<H1>Making a few choices</H1> 

<FORM METHOD="POST" ACTION="/bin/card"> 
Which book do you want to order?<BR> 


‘<input typ’ ue= >B R> 
aay "checkbox" name="Book3" value="Yes">Bock 3-BR> 


SS a ae 


Sada a few choices 
Which book do you want to order? 


L] Book 2 
CJ Book 3 








Selection Lists 


HTML forms offer two more common methods of presenting predetermined 
choices in addition to radio buttons and check boxes. These are selection lists, 
better known as pop-up menus and scrolling lists. 


Pop-up menus allow a person to choose only one item from a list just like radio 
buttons. The first option listed in the HTML document is the default selection 
when the form first loads or when the user clicks the reset button. However, you 
can change the default to an item lower in the list by using the selected argu- 
ment. 


Scrolling lists allow a person to choose one or more items from a list. Options are 
not highlighted when the form first loads or when the user clicks the reset but- 
ton. However, you can set the default to highlight any item in the list by using 
the selected argument. 


The text of each selected option serves as the value for pop-up menus and 
scrolling lists. The browser sends the name and value for each selected option 
when the user clicks the submit button in the form. 













Before you go on... 
ck a level of aificlry:[_Intermediate 













07861-47.html 
fms I oS zy) 6S ells @) fees 
7 ee) HSS) GS) Creel) biel) a 1 
ge re ae ee eee 

ed 

















Pick a level of iicalty 
<select name="level"> 
<option>Beginner 

<option selected>Intermediate 













Pik the tests you want to teke: 

<select name="tests” multiple size="4"> 

<option>History 

<option selected>Math 

<option>English 

<option>Science 

<option>Physics 

<option>Geometry 

<option>Algebra 

<option>Biology 

</select> 

<HR> 

<imput type=submit value=" Continue "> 
JORM> 


</BODY> 
</HTML: 

















> 






114 





<select name="level"> 


<option>Beginner 






<option selected>Intermediate 
<option>Expert 


</select>—_4 


meen * Pe ee 
<select multiple name="tests" size="3"> 


<option>History 
<option selected>Math 
<option>English 
<option>Science 


</select> ——9 





Start with the <select> tag. 


Put the name of the pop- 
up menu between the 
quote marks. 


Put the <option> tag in 
front of the text of each 
item in the pop-up menu. 
Insert the word selected 
after <option> to change 
the default to an item 
lower in the list. 


End with the <select> clos- 
ing tag. 


Start with the <select> tag. 
Include multiple for 
scrolling lists. 


Put the name of the 
scrolling list between the 
quote marks. 


Put the depth of the 
scrolling list window 
between the quote marks. 


Put the <option> tag in 
front of the text of each 
item in the scrolling list. 
Insert the word selected 
after <option> to set the 
default to highlight any 
item in the list. 


End with the <select> clos- 
ing tag. 
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Graphic Send Buttons in Forms 


Every form has a Submit button that sends the information in the form to the 
server (see page 104). You can use a graphic in place of the standard Submit but- 
ton by using the <INPUT TYPE="IMAGE" tag. This tag inserts a graphic that 
acts just like a Submit button in that it sends the information in the form to the 
server. However, it can also act just like an image map (see page 90-93) and link 
to other files. 


The graphic usually presents choices relating to the form but might just be a 
navigation bar. When the user clicks the graphic, the browser sends the form 
and the click coordinates to the server for processing. The server's CGI script 
interprets the click coordinates. This may affect how the information is 
processed or how it links to other files. 


Click coordinates are returned to the server in name value pairs. In the example 
below, a click at coordinates 20,30 sends NavigationBar.20 and whereTo.30 
to the server. 


1 
ee Se eee 
<FORM METHOD="POST" pdb Mesos gu 


ja a! 
Last name:<INPUT TYPE="text" SIZE="40" NAME="LastName">116 
4 


sO 
<INPUT TYPE="IMAGE" SRC="NavigationBar.gif" 
NAME="NavigationBar" VALUE="whereTo"> 





ee 
</FORM> 


[J Start the form with the [J Use the SRC= argumentto J Choose a value for the 


<FORM> tag (see page 
104). 


Put all the text and input 
types after the opening 
tag. 


Put an image between the 
quote marks as the input 
type to create a graphic 
send button. 


insert the graphic and put 
the name of the graphic 
file between the quote 
marks. 


Choose a name for the 
graphic send button and 
put it between the quote 
marks. This will be 
attached to the x coordi- 
nate of the click. 


graphic send button and 
put it between the quote 
marks. This will be 
attached to the y coordi- 
nate of the click. 


Put the copy you want to 
appear in the reset button 
between the quote marks. 


End every form with 
</FORM>. 





Forms 

















Pane ae ere oe a eg Rg ae es tt ee 
See eee SE FP i ee 





<HEAD><TITLE>Graphic Send Buttons</TITLE> 
</HEAD> 

<BODY> 

<FORM METHOD="POST" ACTION="/biniwho"> 

First name:<INPUT TYPE="text" SIZE="40" NAME="FirstName"> 
<P> 


Last name:<INPUT TYPE="text" SIZE="40" NAME 


“ALUE="whereTo" > 





<INPUT TYPE="reset" VALUE="clear"> 
</FORM> 

<P> 

This graphic will send all form information to the server and then go to anew page. 
The server's CGI script will interpret the coordinetes and process the form neme/value 


pairs. 
</BODY> 
</HTML> 





(eee [rs [ret [Fo 
cot: ie: 7/ cine 2209 ea’ TV. MTF ZO es B03 ZOE Gn /RZONTPL] 


First name: 
Last name: 





This graphic will send all form information to the server and then go to a new page, The server's 
CGI script will interpret the coordinates and process the form name/value pairs. 
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Basic Table Elements 


A table is a special part of the body of an HTML document. Tables organize 
information in a grid of vertical columns and horizontal rows. Each box is 
called a cell. 


Cells can contain text or graphics and other tables. Text and graphics within 
cells can also be links (see pages 42 and 46). 


Tables consist of three basic parts: the caption, headings, and rows of cells. You 
assemble tables cell by cell, one horizontal row at a time. Start from the top-left 
corner working your way to the bottom right. Each cell must have something in 
it. Use a space to create an empty cell. 


ae 
<TABLE BORDER> 3 


4 


7 


eg enero ili teen 
<CAPTION Align=top>My immediate family members</CAPTION> 
ee ——— ee 


<TR> 5 
ee See 
<TH>Name</TH><TH>Relation</TH><TH>Date of birth</TH> 
"es 
</TR> 
<TR> 
ee 
<TD>Ben</TD><TD>Father</TD><TD>1920</TD> 
</TR> 
<TR> 
<TD>Sofia</TD><TD>Mother</TD><TD>1924</TD> 
</TABLE> 
———— 
Ey Start the form with the Start each row of cells End each row of cells with 
<TABLE> tag. with the <TR> tag. the </TR> tag. 
Bo Include BORDER within the 5] Put the copy you want to | 8] End every table with 
opening tag if you want to appear in each heading </TABLE>. 
have borders around each cell between the <TH> and 
cell (see page 50). </TH> tags. Think of TH as 


meaning table heading. 
KE} Put the copy you want to 


appear as the caption oO Put the copy you want to 
between the <CAPTION> appear in each cell 

tags. Captions are option- between the <TD> and 

al. Use the Align attribute </TD> tags. Think of TD as 
to determine where it meaning table data. 
appears. Choose top or 

bottom. 
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Tables 


















oe -48.htmn! SS 









ane > 
<HEAD><TITLE>Basic Table Programming Elements</TITLE></HEAD> 
<BODY> 

<H1>Basic Table Elements</H1> 

<P> 

Atebleis a special part of the body of an HTML document surrounded by the table 
tags, <TABLE> ae </TABLE>. With tables you organize information m a grid of 
vertical columns and honzontel rows. Each boxis called a cell. 

<P> 

Cells can contain text and graphics but not other tables. Use lists if you need to 
organize the text within a cell (see page 00). Text and graphics within cells can also 
be links (see page 00 and page 00) 

<P> 

Tables consist of three basic parts; the caption, headings and rows of cells. You 
assemble tables cell by cell, one horizontal row at a time. Start from the top left corner 
working your way to the bottom nght. Each cell must have something init. Use a 
space to create an empty cell. 


P> 
<TABLE BORDER> 
eee Align=top>My immediate family members</CAPTION> 
< > 

<TH>Neme</TH><TH>Relation</TH><TH>Date of birth</TH> 












ee 
Basic Table Elements 


A table is a special part of the body of an HTML document surrounded by the table tags, and 
With tables you organize information in a grid of vertical columns and horizontal rows. Each box 
is called a cell. 














(rose J Nonna 









Cells can contain text and graphics but not other tables. Use lists if you need to organize the text 
within a cell (see page 00). Text and graphics within cells can also be links (see page 00 and 
page 00), 


Tables consist of three basic parts; the caption, headings and rows of cells. You assemble tables 
cell by cell, one horizontal row at a time. Start from the top left corner working your way to the 
Metra right. Each cell must have something in it. Use a space to create an empty cell. 










My immediate family members 
Name Relation Date of birth 
Ben Father 1920 
Sofie Mother 1924 
Davids Sister 1951 
(Menssa Sister 1953 














Spanning Columns and Rows 


Cells can span more than one vertical column or horizontal row. You may find 
it necessary to do this when designing a table. This can also help make informa- 
tion easier to read. Span columns when you want to group cells under a single 
category or heading. Span rows when information in a cell applies to several 
horizontal entries. 


The Colspan and Rowspan arguments can be used with <TH>, the heading cell 
tag, and <TD>, the table cell tag. 


<TABLE BORDER> 
<CAPTION Align=top>My immediate family members</CAPTION> 
<TR> 1 

12 
<TH Colspan=2>Name and Relation</TH><TH>Date of birth</TH> 
</TR> 
<TR> i 

— step a 

<TD>Ben</TD><TD Rowspan=2>Parent</TD><TD>1920</TD> 
</TR> 
<TR> 
<TD>Sofia</TD></TD><TD>1924</TD> 
</TR> 
<TR> 
<TD>Davida</TD><TD Rowspan=2>Sister</TD><TD>1951</TD> 
</TR> 
<TR> 
<TD>Marissa</TD><TD>1953</TD> 
</TR> 
</TABLE> 
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Tables 








—__ Je 2 _] me) Gis eal gis) (aleve ole 
=~ Je sis CSS) Gi Cay bel) aE 



















kk 
<HEAD><TITLE>Spanning columns and rows</TITLE></HEAD> 
<BODY> 

<H1>Spanning columns and rows</H1> 
<P> 
























Cells can span more than one vertical column or honzontel row. You may find it 
necessary to do this when designing a table. Span more than one column when you 
want to group cells under in a single category or heading. Span more that one row 
when information in a cell applies to several rows. Spanning can also help make 
information easier to read. 

<P> 

The Colspan and Rowspan arguments can be used with <TH>, the heading cell tag 
and <TD>, the table cell tag. 

<P> 

<TABLE BORDER> 

een Align=top>My immediate family members</CAPTION> 


< 
= pan=2>Name and Relationj</TH><TH>Date of buth</TH> 
<i 


oR: 
<TD>Ben</ID><TD |</TD><TD>1920</TD> 
</TR> 

<TR> 

<TD>Sofia</ID></ID><TD>1924</TD> 

</TR> 

<TR> 

Se avida</TD><TD Rowspan=2>Sister</ID><TD>1951</TD> 
</TR> 

<TR> 
<TD>Manissa</TD><TD>1953</ID> 


</TR> 






















SICRICA aS columns and rows 





</TABLE> 
</BODY> Location: [file :// /MacintoshS820HD /Dean's /HTML/HTML®20F iles%6203r 4% 20Edtion /!S20HTML®20 
</HT ML> 









Spanning columns and rows 


Cells can span more then one vertical column or horizontal row. You may find it necessary to do 

this when designing 4 table. Span more than one column when you want to group cells under ina 
single category or heading. Span more that one row when information in « cell applies to several 
rows. Spanning can also help make information easier to read. 


The Colspan and Rowspan arguments can be used with , the heading cell tag and , the table cell 
tag. 


My mumediete family members 


Put the Colspan argument 
after the <TH that starts 
the cell spanning more 
than one column. Put the 
number of columns you 
want to span after the = 
symbol. 


Put the Rowspan argument 
after the <TD that starts 
the cell spanning more 
than one row. Put the 
number of rows you want 
to span after the = 
symbol. 
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Controlling Width in Tables 


You can control the overall width of tables and that of individual cells. In fact, 
unless you specify width, tables reflow to fit browser windows just like regular 
text. This may not present a problem if your table is narrow. However, when 
tables are too wide for the window, they appear on-screen in unacceptable ways. 
Design and readability may be affected adversely. 


You control overall table width two ways: by pixel or percent. Tables will always 
have the same width when controlled by pixel. Tables will always be the same 
proportion of window width when controlled by percent. 


You control individual cell width two ways as well: by pixel or percent. Cells 
will always have the same width when controlled by pixel. Cells will always be 
the same proportion of table width when controlled by percent. 


One simple way to handle width is to choose an overall pixel width for the 
table first and then pick percentages for each column. Percentages, pixel dimen- 
sions, and column spanning can affect each other depending on table layout. If 
you are not getting what you want, look at all these variables. Remember, all 
rows in a cell will have the same total width. But cells in the same row can have 
different widths. 

<TABLE BORDER Width=400> 

<CAPTION Align=top>My immediate family members</CAPTION> 

<TR> 3 

<TH Colspan=2>Name and Relation</TH><TH Width=25%>Date of birth</TH> 
</TR> 

<TR> 

<TD>Ben</TD><TD Rowspan=2>Parent</TD><TD>1920</TD> 

</TR> 

<TR> 

<TD>Sofia</TD></TD><TD>1924</TD> 

</TR> 

<TR> 

<TD>Davida</TD><TD Rowspan=2>Sister</TD><TD>1951</TD> 

</TR> . 
<TR> ; 
<TD>Marissa</TD><TD>1953</TD> 

</TR> | 
</TABLE> 
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<HTML> 

<HEAD><TITLE>Table Width</TITLE></HEAD> 

<BODY> 

<H1>Controlling width in tables</H1> 

<P> 

You can control of the overall width of tables and that of individual cells through 
HTML programming, In fact, unless you specify width, tables reflow to fit browser 
windows just like reguler text. This may not present a problem if your table is nexrow. 
However, when tables are too wide for the window, they display on screen in 
unacceptable ways. Design and readability may be affected adversely. 

<P> 












The best way to handle width is to choose an overall pixel width for the table first, 
then pick percentages for each column. Percentages, pixel dimensions and column 
spanning can affect each other depending on table layout. if you are not getting whet 
you want, look at all these variables. Remember, all rows in a cell will have the same 
total width. But, cells in the same row can have different widths 










<P> 

<TABLE BORDER 

<CAPTION Align=top>My immediate family members</CAPTION> 
<TR> 






<TH Colspan=2 >Name and Relation</TH><TH Width=25%>Date of birth</TH> 
</TR> 

<TR> 

<TD>Ben</TD><TD Rowspan=2>Parent</TD><TD>1920</TD> 

</TR> 

<TR> 
<TD>Sofie</ID></TD><TD>1924</TD> 
</TR> 

<TR> 

<TD>Davida</TD><TD Rowspan=2>Sister< 
</TR> 






























Netscape: Table Widt 


[fess [insgee [ Pent [Fd | 






<TR> 

> pmb 0 iyi Lectin: [e777 ane ZOHO oe [HTP HTP ZO is 203 920 /RZORTLIOY 
<(TABLE> ° . ° 

</BODY> Controlling width in tables 

</HTML> 


You can control of the overall width of tables and that of individual cells through HTML 
programming. In fact, unless you specify width, tebles reflow to fit browser windows just like 
reguler text. This may not present a problem if your table is narrow. However, when tables are 
too wide for the window, they displey on screen in unacceptable ways. Design ond readability 
mey be affected adversely. 









The best way to handle width is to choose an overell pixel width for the table first, then pick 
percentages for each column Percentages, pixel dimensions end column spanning can affect each 
other depending on table ep if you are not getting whet you want, look at all these vanables 
Remember, all rows in « cell will have the same total width But, cells in the same row can have 
different widths. 










My immediate family members 
Name and Relation 







Parent 


Put the Width argument 
within the <Table> tag. Put 
the exact pixels or percent 
of window width after the 
= symbol. 





Sister 


Put the Width argument 
after the <TH or <TD that 
Starts the cell. Put the 
percent of table width or 
exact pixels after the = 
symbol. 
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Alignment 


You can control alignment of text and graphics in table cells through HTML 
programming. Unless you specify alignment, table captions and headings 
appear centered, and all other cells align left in the middle of the cell. This looks 
fine for many tables. However, you may want to improve design and readability 
through alignment. 


You control horizontal and vertical alignment of entire rows by putting the 
Align argument within the <TR> tag. You control horizontal and vertical align- 
ment of individual cells by putting the Align argument within the <TH> or 
<TD> tags. 


<P> 

<TABLE BORDER Width=400> 

<CAPTION Align=top>My immediate family members</CAPTION> 

<TR Align=Left>  ° 

<TH Colspan=2 >Name and Relation</TH><TH>Date of birth</TH> 

</TR> 

<TR> 

<TD>Ben</TD><TD Rowspan=2 Align=Center>Parent</TD><TD>1920</TD> 
</TR> 


<TR> 

<TD>Sofia</TD></TD><TD>1924</TD> Put the Align argument 
within the <TR> tag. Put 

Seca the align option after the = 

<TR> symbol. Choose between 


. Left, Right, and Center. 
<TD>Davida</TD><TD Rowspan=2 Align=Center 


VAlign=top>Sister</TD><TD>1951</TD> Bo Put the VAlign argument 
2 within the <TH> or <TD> 
</TR> 
that starts the cell. 
<TR> Put the VAlign option 


after the = symbol. 


<TD>Marissa</TD><TD>1953</TD> Choose between Top, 

</TR> Middle, and Bottom. Think 
of the V in VAlign as 

</TABLE> meaning vertical. 
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|s<HTML> 
<HEAD><TITLE>Table Algnment</TITLE></HEAD> 

<BODY> 

<H1>Aligning in tables</H1> 

<P> 

You can control alignment of text and graphics in table cells through HTML 
programming, Unless you specify slignment, table captions and headings will appear 
centered and all other cells will align left in the middle of the cell. This looks fine for 
meny tables. However, you may want to improve design and readability through 
alignment. 

<P> 

You control horizontal and vertical alignment of entire rows by putting the align 
argument within the <TR> tag. You control horizontal and vertical ahgnment of 
individual cells by putting the align argument within the <TH> or <TD> tags. 

<P> 

<TABLE BORDER Width=400> 

<CAPTION Align=top>My immediate family members</CAPTION> 

<TR Align=Left> 

<TH Colspan=2 >Name and Relation</TH><TH>Date of birth</TH> 

</TR> 

<TR> 

<TD>Ben</TD><TD Rowspan=2[Align=Center>Paren}</TD><TD>1920</TD> 
</TR> 

<TR> 

<TD>Sofia</TD></TD><TD>1924</TD> 

</TR> 

<TR> 

<TD>Davida</TD><TD Rowspan=2 Align=Center 


VAL p>Sisterj</TD ><TD>1951</TD> 


<TR> 
<TD>Marissa</TD><TD>1953</TD> 
</TR> 
</TABLE> 
</BODY> 
</HTML> 











































Netscape: Table Algnment 


<] Home] [Reload ] [ Print [Find | 
Location: | file :/ / /Macintosh%20HD /Dean's /HTML/HTML®20F iles %203rd% 20E dtion /!SZOHTMLB20] 


Aligning in tables 

















You can control alignment of text and graphics in table cells through HTML programming. Unless 
you specify alignment, table captions and headings wall appear centered and all other cells will 
align left in the middle of the cell. This looks fine for many tables. However, you may went to 
improve design and readability through alignment. 








You control honzontel and vertical alignment of entire rows by putting the align argument within 
the tag. You control horizontal and vertical alignment of individual cells by putting the align 
argument within the or tags 






My immediate family members 
Name and Relation Date of birth 


Ben 1920 
Perent 

Sofia 1924 

Davida 1951 

Menssa 1953 
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Non-Wrapping Text 


You can prevent text in table cells from automatically wrapping to the width of 
the cell through HTML programming. Just use the Nowrap argument inside the 
<TD> tag. 


<TD Nowrap>Basic Table Elements</TD> 


J Put the Nowrap argument 
within the <TD> tag. 


07861-52.html 


[Times ___J iJ [BI 71u) (Als) alle (3) El 
fom SSS) CES) BS) Ceti) Casi) me | 
I a gee a ee OD 


<HTML> 

<HEAD><TITLE>Non-wrapping text</TITLE></HEAD> 

<BODY> 

<H1>Non-wrapping text</H1> 

<P> 

You can prevent text in table cells from automatically wrapping to the width of the cell 
through HTML programming. Just use the Nowrap argument inside the the <TD> teg 
for any cell 

<P> 

<TABLE BORDER> 

<CAPTION Align=top>Tables with HTML</CAPTION> 

<TR> 

<TH>Topic</TH><TH>Descnption</TH> 

</TR> 


[R 
<TD Nowrap>Basic Table Elements</TD>|<TD>A table is a special part of the body 

of an HTML document surrounded by the table tags. With tables you organize 

information in a grid of vertical columns and horizontal rows. Each boxis called a cell. 

</TD> 

</TR> 

<TR> 

<TD>Spenning Columns and Rows</TD><TD=>Cells can span more than one vertical 

column or honzontel row. You may find it necessary to do this when designing a table. 

Span more than one coluran when you want to group cells under in 4 single category or 

heading. Span more that one row when information in a cell applies to several rows. 

Spanning can also help make information easier to read. 

</TD> 

</TR> 

<TR> 

<TD>Controling Width in Tables</TD><TD>You can control of the overall width of 

tables and that of individual cells through HTML programming. In fact, unless you 

specify width, tables reflow to fit browser windows just like regular text. This may not 

present a problem if your table is narrow. However, when tables are too wide for the 

window, they display on screen in unacceptable ways. Design and readability may be 

affected adversely, 

</TD> . 
</TR> i | 
<TR> i a 
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Netscape: Non-wrapping 


‘Location [rie ¢ /MacintoshS20HD /Dean's /HTML/HTML®&20F iles 2031 dS 20Edtion /!ISZOHTMLB2O}| 
| . 
| Non-wrapping text 


} You can prevent text in table cells from automatically wrapping to the width of the cell through 
HTML programming. Just use the Nowrap argument inside the the tag for any cell. 


Tables with HTML 


Description 
A table is 4 special part of the body of an HTML document 
surrounded by the table tags. With tebles you organize information 
in a grid of vertical columns end honzontal rows. Each boxis called 
a cell. 


Cells can span more then one vertical column or horizontal row. You 
may find it necessary to do this when designing a table. Span more 
Spanning Columns and —than one column when you want to group cells under m a single 
Rows category or heading, Span more that one row when information in 4 
cell applies to several rows. Spanning can also help make 
information easier to read. 


You can control of the overell width of tables and that of individual 
cells through HTML programming. In fact, unless you specify width, 
Controling Width in tables reflow to fit browser windows just like reguler text. This may 
Tebles not present a problem if your table is narrow. However, when tables 
are too wide for the window, they display on screen in unacceptable 
ways. Design and readability may be affected adversely. 


You can control alignment of text and graphics in table cells through 
HTML programming, Unless you specify alignment, table captions 

Alignment in Tables and headings will appear centered and all other cells will align left at 
the top of the cell This looks fine for many tables. However, you 
may want to improve design and readability through alignment. 
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Borders, Spacing, and Padding 


You can vary three basic parts of a table that change its look: the border, spac- 
ing, and padding. The BORDER is the frame outside the table. Cellspacing 
alters the thickness of the grid lines between cells. Cellpadding alters the thick- 
ness of the empty space between grid lines and text in the cells. 


If you don’t want any borders, eliminate the BORDER argument entirely from 
the <TABLE> tag. 


1 2 5 


<TABLE BORDER=10 Cellspacing=6 Cellpadding=10> 


eT 


4 


i Start the table with the include Cellpadding within 


<TABLE tag. the opening tag if you 

want to alter the space 
go Include BORDER within the between grid lines and 

opening tag if you want to text in the cells. Put the 

have borders around each width of the space mea- 

cell. Put the width of the sured in pixels after the = 

outside frame measured symbol. 

in pixels after the = sym- 

bol. Close the table tag with 
the > symbol. 


ey Include Cellspacing within 
the opening tag if you 
want to alter the grid of 
lines between cells. Put 
the width of the grid mea- 
sured in pixels after the = 
symbol. 
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<HTML> 
<HEAD><TITLE>Borders, spacing and padding</TITLE></HEAD> 
<BODY> 

<H1>Borders, spacing and padding</H1> 

<P> 

|kP> 

<TABLE BORDER> 

<CAPTION Align=top>My immediate family members</CAPTION> 
<TR> 

<TH>Neme</TH><TH>Relation</TH><TH>Date of birth</TH> 
</TR> 

<TR> 
<TD>Ben</ITD><TD>Fsther</ID><TD>1920</TD> 
</TR> 

<TR> 
<TD>Sofia</TD><TD>Mother</TD><TD>1924</TD> 
</TR> 

<TR> 
<TD>Davida</TD><TD>Sister</TD><TD>1951</TD> 
</TR> 

<TR> 
<TD>Manssa</TD><TD>Sister</TD><TD>1953</TD> 
































<TH>Name</TH><TH>Relation</TH><TH>Dai 
</TR> 
<TR> 
<TD>Ben</TD><TD>F ather</TD><TD>1920<, 
</TR> 
<TR> 
<TD>Sofia</TD><TD>Mother</TD><TD> 1924. 
</TR> 
<TR> 
<TD>Davida</TD><TD>Sister</TD><TD>195' 

















2255 J es aes sea and aT 


Location: —— ‘/Macintosh%S20HD /Dean’s /HTML/HTML&20F ilesB203r dB20Edtion /!S2OHTML B20} 


Borders, spacing and padding 


My immediate family members 


Name Relation Date of birth 
Ben Father 1920 
Sofie Mother 1924 
Davida Sister 1951 
1953 



















Marissa Sister 


My immediate family members 


Father 









Mother 


Sister 


Sister 





Controlling Grid Lines in Tables with 
Internet Explorer 


A border and grid lines appear around and between cells when the BORDER= 
argument is put within the <TABLE> tag (see page 118). With Internet 
Explorer, you have extra HTML tags that control the border and the grid lines in 
a variety of ways. 


Grid lines help make information more understandable by visually organizing 
columns and rows. For example, in a table of numbers, you may want to put 
vertical lines between the columns, but not include horizontal lines. This kind 
of customized grid improves the table by helping the eye see relationships 
between the cells. For whatever reason you have, you can elect to draw or erase 
the border around a table as well as the lines between columns and rows. To 
change any of these parts, you must first include the BORDER= argument 
within the <TABLE> tag. 


To alter the border around the table, put the FRAME= argument within the 
<TABLE> tag, followed by your choice of the following borders: 


BOX draws all four sides of the border. 

ABOVE draws only the top of the border. 

BELOW draws only the bottom of the border. 

HSIDES (Horizontal Sides) draws the horizontal border on the top and bottom 
of the table. 

VSIDES (Vertical Sides) draws the vertical border on the left and right sides of 
the table. 

LHS (Left Hand Side) draws only the left hand side of the border. 

RHS (Right Hand Side) draws only the right hand side of the border. 

VOID eliminates the border. 


To alter the grid lines between columns and rows, put the RULES= argument 
within the <TABLE> tag, followed by your choice of grid line options. 

ALL draws both vertical and horizontal grid lines. 

ROWS draws horizontal grid lines between rows. 

COLS draws vertical grid lines between columns. | 
NONE eliminates all grid lines between columns and rows. 


1 Z 3 4 5 


—— tL LLL 


<TABLE BORDER=10 FRAME=VOID RULES=ROWS> 


oe 
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GridLines.html 





RULI 
<CAPTION “ALIGN top> Riles ernest a hanns cICAPTION> 
<TR> 
<TH>Name</TH><TH>Relation</TH><TH>Date of birth</TH> 
</TR> 
«<TR> 
<TD>Ben</TD><TD>F ather</TD><TD>1920</TD> 
oe Controling Rules in Tables 
< > i 
<1D>Sofia</TD><TD>Mother</ID><TD>1924</T1]/ a @ ee gS 
</TR> g ryard Stop Refresh Horne Search | News Favorites Larger Smaller 
<TR> 
<TD>Davida</TD><TD>Sister</TD><TD>1951</T}— 
</TR> 
<TR> 1 = ‘ 
<TD>Mamisa</ID><TD>Sister</ID><TD>1953</]| Name |Relation |Date of birth 
Ben (Fether ||1920 
Sofia |Mother {1924 


(STABLE BORDER FRAME=VOID RULES=rawss] | Devide |Siser = 1951 
«CAPTION ALIGN=top>Rules between rows</CAP]] Marrisa|/Sister [1953 
<TR> 
<TH>Name</TH><TH>Relation</TH><TH>Date of 
</TR> 
<TR> 
<TD>Ben</TD><TD>Father</TD><TD>1920</TD> 
</TR> 
<TR> 
<TD>Sofia</TD><TD>Mother</TD><TD>1924</TL 
</TR> 
<TR> 
<TD>Davida</TD><TD>Sister</TD><TD>1951</T] 
</TR> 
<TR> 





















= 




























Rules between columns 





Rules between rows 
Name Relation Date f dirth 





Frame above 
Name Relation Date of birth 
Ben Father 1920 
Sofia Mother 1924 
Davide Sister 1951 
Marnsa Sister 1953 


Gi] Start a table with the 
<TABLE tag (see page 


118). 


Frame on the vertical sides 
|Name Relation Date of birth || 
{Ben Fether 1920 | 
|Sofia Mother 1924 | 
||Devide Sister 1951 | 
||Maxrisa Sister 1953 \| 


EB Toalter the border around 
the table or any grid lines 
within it, put the BORDER= 











argument within the Tal 

<TABLE> tag. Measure 

border width in pixels. oO To alter any of the grid 

lines in the table, put the 

E} To alter the border around RULES= argument within 

the table, put the FRAME- the <TABLE> tag. Choose 

argument within the between ALL, ROWS, 

<TABLE> tag. Choose COLS, or NONE. 

between BOX, ABOVE, 

BELOW, HSIDES, VSIDES, ; 

LHS, RHS, or VOID. 5 a. —- 
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Using Color in Tables 


The color of various parts of a table is controlled with HTML tags. Color can be 
used to draw attention to specific elements of a table or to enhance the design 
of a table. For example, in a table of numbers, you may put the bottom row of 
figures in color to indicate totals for the columns. Or, you may want to alternate 
colors from row to row for purely aesthetic reasons. Whatever your reason, the 
background color of a whole table, an entire row, or an individual cell can be 
specified by using the BGCOLOR= argument. To change the color of a whole 
table's background, put the BGCOLOR= argument within the <TABLE> tag. To 
change the color of an entire row, put the BGCOLOR= argument within the 
<TR> tag that starts that row. To change the color of an individual cell, put the 
BGCOLOR= argument within the <TD> tag of that cell. 


Internet Explorer has several more tags for controlling color in tables. All of 
these tags are placed within the <TABLE> tag. However, you must specify a 
border by using BORDERz= for any of these tags to have an effect. BORDER- 
COLOR= changes the color of the entire border. Because tables with wide bor- 
ders have a beveled look, ure BORDERCOLORLIGHT= to change the color of 
the light side and BORDERCOLORDARK: to change the dark side. 


Define the color as either a mix of red, green, and blue or by using one of the 
standard color names (see page 200). 


sok the yille, oe 

<TABLE BGCOLOR=ffffff BORDER=10 BORDERCOLOR=808080 

BORDERCOLORLIGHT=707070 BORDERCOLORDARK=202020> 
5 6 

<TR BGCOLOR=Yellow> 


<TH>Name</TH><TH>Relation</TH><TH>Date of birth</TH> 


</TR> 
<TR> 
8 
a eee ee ee oe 
<TD BGCOLOR=009000>Ben</TD><TD>Father</TD><TD>1920</TD> 
</TR> 
</TABLE 
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Page T 


Start with the <TABLE> tag 
to create a table (see 
page 118). 


Put the BGCOLOR= argu- 
ment, followed by the 
color, within the <TABLE> 
tag to change the color of 
a whole table. 


To create a border for the 
table, put the BORDER= 
argument, followed by a 
number, within the 
<TABLE> tag. Measure 
border width in pixels. 








a _— Colorlables.html S= a: 
| fies Ie Bz) ey ea) io oa» 


| format Jie | (JS ses CES Hie Chey beet) a 
-s I I el 


SHEaD> eTITLE> Color in Tables</TITLE> 
</HEAD> 





'=707070 BORDERCOLORDARK =202020 

> My immediate family members</CAPTION> 
<TH>Name</TH><TH>Relation</TH><TH >Date of birth</TH> 
</TR> 


a 
he dey Ee ee ee 


</TR> 
<TR> 
<TD>Sofis</TD><TD>Mother</TD><TD>1924</TD> 


</TR> 


<TR> 
<TD>Davida</TD><TD>Sister</TD><TD>1951</TD> 
</TR> 


<TR> 
<TD>Mamsa</TD><TD>Sister</TD><TD>1953</TD> 
</TR> 

</TABLE> 


<BODY> 
</HTML> 


[Normel_ TS 


Ey] Put the BORDERCOLOR- 
argument, followed by 
either the color mix or 
color name, within the 


<TABLE> tag to change the 


color of a table's border. 
Internet Explorer only. 


Ey Put the BORCOLORLIGHT- 
argument, followed by 
either the color mix or 
color name, within the 


<TABLE> tag to change the 
color of a light side of the 


border. Internet Explorer 
only. 






— Netscape: Color in Tables 


Tables 


Put the BORDERCOLOR- 
DARK= argument, followed 
by either the color mix or 
color name, within the 
<TABLE> tag to change the 
color of a dark side of the 
border. Internet Explorer 
only. 


Put the BGCOLOR= argu- 
ment, followed by either 
the color mix or color 
name, within the <TR> tag 
to change the background 
color of an entire row. 


Put the BGCOLOR= argu- 
ment, followed by either 
the color mix or color 
name, within the <TD> tag 
to change the background 
color of an individual 
cell. 





My immediote family members 





Name Relation Date of birth 
WM Father 1920 
Sofie Mother 1924 
Davida Sister 1951 
Marisa Sister 1953 





file lacintosh3820HD /Dean's /HTML/HTML% 20F iles%203r d%20E dtion /1920HTML 20} 
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Grouping Columns in Tables 
with Internet Explorer 


Columns of table cells can be grouped by using the <COLUMN:> tag. This 
enables you to set cell characteristics that apply to all the cells in a column. This 
is much easier than setting the style in every cell individually. 


Only a few arguments to <COLUMN> are currently supported by Internet 
Explorer. ALIGN= shifts the content of the cells to the left, right, or center. 
SPANE= applies the column group to more than one column. Because this tag is 
useful for controlling cell design, more arguments should be added in the 
future. 


The <COLUMN> tag is placed just after the opening <TABLE> tag and before 
any rows are created. Include one <COLUMN> tag for each column of cells in 
the table or use SPAN= as described above. If your table has three columns, the 
first tag effects the right column, the second tag the middle column, and the 
third tag the right column. 


1 
<TABLE> 
3 


<COLGROUP ALIGN=RIGHT> 
4 5 
— 


—— 


<COLGROUP ALIGN=CENTER SPAN=2> 

<TR> 
<TD>Ben</TD><TD>Father</TD><TD>1920</TD> 
</TR> 

<TR> 
<TD>Sofia</TD><TD>Mother</TD><TD>1924</TD> 
</TR> 


7 
</TABLE> 
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<HTML> 
<HEAD><TITLE>Grouping Columns in Tables</TITLE> 
</HEAD> 

<BODY> 

This table uses column grouping to elign type in the cells 
<TABLE BORDER=10 TH=300> 

<COLGROUP ALIGN=LEFT> 

<COLGROUP ALIGN=CENTER>} 

| LsCOLGROUP ALIGN=RIGHT> 

| <THEAD> 

<TR> 
<TH>Neme</TH><TH>Relation</TH><TH>Date o5@ 






Columns in Tables 


















| fl x 
| Srpopy> te 2, & 2 ne totes A Smaller 
| <TR> Mi rirns clef iaraselaureeeet 





| <TD>Ben</TD><TD>F ether</ID><TD>1920</ID 


| </TR> This table uses column grouping to align type in the cells. 












| 
<TR> 
<TD>Sofia</TD><TD>Mother</TD><TD>1924<: Name Relation Date of birth 
ae ‘Ben Father 1920 
< > Ti q 
<TD>Devida</ID><TD>Sister</ID><TD>1951</] 0% WS 1924 |) 
</TR> Devide Sister 1951 | 


<TR> Merrisa Sister 1953 
<TD>Marrisa</TD><TD=Sister</TD><TD>1953</| _ sommes 
</TR> 





| <TBODY> This table spans groups of columns to align type in the cells. 

</TABLE> é § 
<P> Name Relation Date of birth 8 
This table eoEReI0 of columns to align type in th Ben | Father 1920 | 
<TABLE BeRDE owen [Sofia Mother | 1924 | 

Devide Sister | 1951 

Marisa Sister 1953 | 
RT EAL LIES LT SEL IEEE GI TIN TED EI LE =] 





<TH>Name</TH><TH>Relation</TH><TH>Date o| 
</TR> 


Page | Normal 





El Start with the <TABLE> tag 
to create a table (see 
page 118). 


EZ Put the <COLGROUP tags 
after the <TABLE> tag to 
control columns of cells. 








Eq Include ALIGN=, followed EJ Put the number of 
by the alignment option columns you want to 
you want, within the group after the = sign. 
<COLGROUP tag. Choose 
between LEFT, RIGHT, or B Construct the table row by 
CENTER. row (see page 118). 


Zl include SPAN- within the Close the table with the 
<COLGROUP tag to group </TABLE> tag. 
more than one column. 
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What Frames Are and How They Work 


One way to display more than one HTML file on a user's screen is to have more 
than one browser window open. Another way is to divide one window into 
more than one section. These sections are called frames. Each frame displays a 
different HTML document and can have its own scroll bars, links, graphics, and 
so forth. Frames can either function independently or can affect each other by 
using links that target other frames (see page 144). 


To use frames, you need a minimum of three files: a set-up file and two HTML 
source files. The set-up file describes the layout of the frames within the browser 
window (see page 142). This file indicates the HTML source files for each frame 
but contains no text or graphics of its own. The HTML source files are displayed 
in the frames and, just like any other HTML file, can have links, graphics, tables, 
and so forth. 


Browsers capable of understanding the <FRAME> tag read the frame layout as 
described in the set-up file, then read each HTML source file. The browser dis- 
plays each source file in the appropriate frame. If the browser is not frame capa- 
ble, it ignores the <FRAMED> tag and displays the <BODY> of the file, which is 
usually a message to get a frame capable browser. However, it can be a link to an 
alternate set of files built for non-frame capable browsers. 
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‘This is the frame that appears at the bottom of the window. [twill take the rest of the 

space available in the window [twill have scroll bars if the information does not fit in 

the frame 

<tt> 

‘This is the frame that appears at the botrom of the window. It will take the rest of the 
jace available in the window. It will have scroll bars if the informanon does not fit in 

frame. This is the frame that appears at the bottom of the window. It will take the 

rest of the space available in the window It will have scroll bars the information 

does not ftim the frame This is the frame that appears at the bottom of the window It 

wall take the rest of the space available i the window. It will have scroll bars ifthe 

information does not itm the frame. 

<BODY> 

</aTML> 








<HTML> 
<HEAD> <TITLE>Frame Basic Top</TITLE> 
</HEAD> 


<BoDy> 

<Hl> 

Thus is the frame that appears at the top of the window It will take 25% of the window 
Do mater ew big ie 


Tasch frame char appears at che tp ofthe window It wil take 25% of the window 
te marrerhow bigs This isthe ame that appears wt he top ofthe window It wil 
take 25% of the window no marter how big itis This isthe frame that appears at the 
top of the window. It will tke 25% of the window no matter how big tis This is the 
frame that appears at che top of the window. It wil take 25% of the window no matter 
how big itis. This is the frame that appears at che top of the window. It wil take 25% 
of the window no matter how big itis. This is the frame that appears at the top of the 
window Itwill take 25% of the window no matter how big itis, This is the frame thet 
appears at the top of the window It will take 25K of the window no matter how big it 


is. This is the frame that appears atthe top of the window. It will take 25% of the 
window no matter how big 1s 
- <BODY> 





The source files are just 

like any other HTML file. 
They contain text, graph- 
ics, links, tables, and so 
forth. 





<HTML> 
<HEAD> <TITLE>Basic Frame Elements</TITLE> 
<HEAD> 


<ERAMESET ROWS="25K,* “> 

<FRAME SRC=FrameBasicTop html NAME =TOP> 
<FRAME SRC=FrameBasicBorcom html NAME =BOTTOM> 
</ERAMESET> 


The set-up file describes 


how the frames section SNOFRAME> 
the window and Sore 


</ATML> 


describes the source a 
files for each section. 


















The browser displays each 
source file in its own frame 
within one window. 











a = = sic Frame Elements © 9) a 
tx [ove] rome] (eon) (Gomes [ewer] pret [res] Lowe oy 
Lpeaben e777 200 Dae MTT /MTPA NZDF es 20 ROE /AONTIRS] 
This is the frame that appears at the top 
of the window. It will take 25% of the 
window no matter how big it is. 


‘This is the frame that eppears at the top of the window It will take 29% of the window no 
otter how big itis. Thus is the frame that appears atthe top ofthe window. It will take 25% of 










Tal 

















This is the frame that appears at the 
bottom of the window. It will take the 
rest of the space available in the 
window. It will have scroll bars if the 
information does not fit in the frame. 

‘This is the frame that appears at the bottom of the window. It will take the rect of the space 
available im the window ie will have scroll bars if the udormation does not fit m the frame Thus 
is the frame that appears at the bottom of the window. It will take the rest of the space 
available in the window It will have scroll bare if the informanon does not fit in the frame This 


is the frame thet appears at the bottom of the wandow It wil vce the rest of the space 
avalable inthe window It will have scrall bare ifthe usformation does not fn the frame. 
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Basic Frame Elements 


A file that sets up frames has all the same elements as any other HTML file. It 
starts and ends with the <HTML> and </HTML> tags (see page 20). However, 
to divide the window into several frames, insert the <FRAMESET> tag after the 
</HEAD> tag but before the <BODY> of the file. And, to include a message for 
non-frame capable browsers, put the <BODY> of the file within the 
<NOFRAMES> tag. 


The opening <FRAMESET> tag defines the layout of the frames within the 
browser window. Choose between COLS for side-by-side frames or ROWS for 
stacking frames. To divide the window into two sections, include two numbers 
separated by a comma. To divide the window into three sections, use three 
numbers separated by a comma, and so on. Measure frame size either in pixels 
or by percent of window. Use an asterisk (*) if you want the frame size to be 
whatever remaining space is available. For example, <FRAMESET 
COLS="20,50,*"> creates three vertical frames. The left frame measures 20 pix- 
els, the center frame SO pixels, and the right frame takes up the rest of the win- 
dow—no matter how large or small it is. If you are using a frame as a graphic 
navigation bar, you should set the frame to match the size of the graphic. For 
more on controlling frame layout, see page 142. 


After defining the frame layout, you have to fill each frame with an HTML 
source file. <FRAME> tags define the source file for each frame created by the 
<FRAMESET> tag; just put the name of the HTML file within the quote marks 
after the SRC= argument. Each frame should have a name, which is important 
when targeting frames from links in other frames (see page 144). 
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Frames 


<FRAME> tags can contain arguments that control various frame attributes, as 
listed below. 


BORDER2= controls the width of the border between frames. Measure border 
width in pixels. 


BORDERCOLOR2= controls the color of the border between frames. Color is 
either a mix of red, green, and blue or a color name (see page 44). 


NORESIZE prevents the user from changing the size of frames by dragging 
their borders. Do not use the NORESIZE argument if you want users to be able 
to resize frames. 


SCROLLING= controls whether there are scroll bars on the frame. Just like a 
browser window, scroll bars will automatically appear on a frame if the source 
file does not fit. Choose between YES or NO. 


MARGINHEIGHT= adds extra space between the top of the frame and the text 
or graphics in it. MARGINWIDTH= adds extra space between the sides of the 
frame and the text or graphics. Measure height and width in pixels. 


The HTML source files are placed in the frame layout in the order they are listed 
in the set-up file. For example, if the set-up file defines three vertical frames of 
different widths, <FRAMESET COLS="100,200,300">, and then lists three 
source files <FRAME SRC="A.html">, <FRAME SRC="B.html">, and 
<FRAME SRC="C.html">, the left frame, which is 100 pixels wide, will con- 
tain file A.-html; the center frame, which is 200 pixels wide, will contain file 
B.html; and the right frame, which is 300 pixels wide, will contain file C.html. 


139 





1 


3 


ee ee ees 
<FRAMESET COLS="40%,*"> 
4 


mas A rrr erase? andes et corte 2 ol 
<FRAME SRC="A.html" NAME="StuffOnTheLEFT" 


BORDER=10 BORDERCOLOR="202020" 


7-NORESIZE SCROLLING=YES 


MARGINHEIGHT=20 MARGINWIDTH=30> 


9-FRAME SRC="B.htmi" NAME="StuffOnTheRIGHT"> 


10 


SS 
</FRAMESET> 


NOFRAME> 


BODY> 


11 


BODY> 


NOFRAME> 


Start with the <FRAMESET 
tag. 


Within the <FRAMESET> 
tag, put COLS= for vertical 
frames or ROWS= for hori- 
zontal frames, followed 
by dimensions for each 
frame. Separate the 
dimensions by commas. 
Measure either in pixels 
or by percent of window. 
Use an asterisk (*) if you 
want the frame size to be 
whatever remaining 
space is available. 
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et a browser that supports frames. 


Ey Close the <FRAMESET tag 


with the > symbol. 


Include a <FRAME> tag for 
each frame defined by 
the <FRAMESET> tag. 


Put the name of the HTML 
file for each frame within 
the quote marks after the 
SRC= argument. 


Put the name of each 
frame within the quote 
marks after the NAME= 
argument. 


Include any other frame 


attributes you want to 
control within the 
<FRAME> tag. (see page 
138) 


Close the <FRAME tag with 
the > symbol. 


List other <FRAME> tags 
in order between the 
<FRAMESET> and 
</FRAMESET> tags. 


Close the <FRAMESET> tag 
with the </FRAMESET> tag. 


{EJ Put a message for non- 


frame capable browsers 
as the body of the file 
between the <NOFRAME> 
and </NOFRAME> tags. 


Frames 




































FramesDesi 
Te (Je Ze) (ts) ele 3) (es 


fem J? eas) HSS) SS) Coe) Gast) mF 
Ho fe se 












<HEAD><TITLE>Frames Design</TITLE> 

</HEAD> 

<FRAMESET COLS="40%,*"> 

<FRAME SRC=FrameElementsL eft html 

BORDER=10 

BORDERCOLOR="202020" 
IZE 


<FRAME SRC=FrameElementsRight huml> 
</FRAMESET> 

<NOFRAME> 

<BODY> 

Get a browser that supports frames 
</BODY> 
</NOFRAME> 
</HTML> 













SS netscape: Frames Desic SSS eee ae 
crvora] Home | [Reload [images [ Print 
This is the frame that 
appears at the RIGHT 
of the window and 
takes up the rest of the 
space. 





















This is the 
frame that 
appears at 
the Left of 
the 
window 
and is 40% 
of the 
window. 











Controlling Frame Layout 


With the <FRAMESET> tag, you can divide a browser window into vertical or 
horizontal frames. Frames placed side-by-side are created with the COLS= argu- 
ment. Frames stacked one over the other are created with the ROWS= argu- 
ment. Often, browser windows are composed of only side-by-side or stacked 
frames. This works fine for many Web sites. However, it is also possible to mix 
both stacked and side-by-side frames in one window. This is done by nesting 
<FRAMESET> tags. In other words, you can put frames inside frames. 


In the example below, the first <FRAMESET> tag divides the window into two 
equal frames, stacked one over the other. Next, using the <FRAME> tag, it fills 
the top half with an HTML source file, SRC="FrameLayoutTop.html". Then, 
instead of filling the bottom half with a second <FRAME> tag and source file, it 
is again divided in half with a new <FRAMESET> tag. This, in turn, gets filled 
with two <FRAME> source files. If you’re confused, just think of the second 
<FRAMESET> tag as the filling for the bottom half of the first <FRAMESET> 
tag. 


This is just one way of nesting frames to divide a browser window. Try other lay- 
outs that fit your needs. But make sure each <FRAMESET> tag is closed with 
its own matching </FRAMESET> tag. Also, remember to keep track of the 
frames by name in case you need to target any one of these frames with a link 
from another frame (see page 144). 


Bt an ee 

<FRAMESET eer a 

<FRAME SRC="FrameLayoutLeft.html" NAME="BottomLEFT"> 3 
<FRAME SRC="FrameLayoutRight.htm!I" NAME="BottomRIGHT"> 
</FRAMESET> 


</FRAMESET> 
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Frames 










FrameLla outCols&Rows. html copy 


la) 
Sfenr eer af 


a ESS Gee fe Cl Is 











eos > 
<HEAD><TITLE>Basic Frame Elements</TITLE> 
</HEAD> 
<FRAMESET ROWS="S0%,50%"> 
<FRAME SRC="FrameL ayoutTop html" NAME="TOP"> 
<FRAMESET COLS="50%, 50%"> 
<FRAME SRC="FremeL ayoutLeft. hun” NAME="BottomLEFT"> 
<FRAME SRC="FrameL ayoutRight huml'| NAME="BottomRIGHT"> 

















Netscape: Basic Frame Elements 


Se eee 
Location: [file :///Macintosh%S20HD /Dean’s /HTML /HTMLS20F iles S203r dB 20E dtion /!SZOHTML B20} 


This is the frame that appears at the TOP 
of the window. 









Get a browser that supports frames 
</BODY> 
</HTML> 





EJ Start with the <FRAMESET 
tag. 


2 Within the <FRAMESET> 
tag, put COLS= for vertical 





frames or ROWS= for hori- 
zontal frames, followed 
by dimensions for each 
frame. Separate the 
dimensions by commas. 
Measure either in pixels 
or by percent of window. 
Use an asterisk (*) if you 
want the frame size to be 
the remaining available 
space. 


IE) Close the <FRAMESET tag 


with the > symbol. 


Ey) include a <FRAME> tag for 


each frame defined by the 
<FRAMESET> tag. Put the 
name of the HTML file for 
each frame within the 
quote marks after the 
SRC= argument. Make 
sure you name each 
frame with the NAME= 
argument. 







This is the frame 
that appears at the 
LEFT of the 

window. 








This is the frame 
that appears at the 
RIGHT of the 


window. 




















Close the <FRAME tag with 
the > symbol. 


Divide the frame again 
with a second <FRAMESET 
tag. 


Include a <FRAME> tag for 
each frame defined by the 
second <FRAMESET> tag. 

Put the name of the HTML 
file for each frame within 


the quote marks after the 
SRC= argument. Make 
sure you name each frame 
with the NAME= argument. 


EB) Close the <FRAME tag with 


the > symbol. 


EE) Close each <FRAMESET> 


tag with its matching 
</FRAMESET> tag. 
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Targeting Frames with Links 


Targeting is a way of making links in one frame change the file displayed in 
another frame. Navigation bars are one common use for targets. A navigation 
bar appears in a non-scrolling frame at the top, bottom, or to one side of the 
window. It contains a set of links that cause different files to be displayed in a 
second, usually larger, frame. This is done by stating the target frame as part of 
the link. The link can be simple text, a graphic, or an image map. 


It takes two parts to make a target work properly. First, when creating the frame 

in the set-up file, you must name it. Then, when creating the link, you must use 
that same name to indicate in which frame the linked HTML file should be dis- 

played. 


The set-up file: 1 
<FRAMESET COLS="25%,*"> 


<FRAME SRC="firstFrameBasic.html" NAME="LEFT"> 
3 
st 
<FRAME SRC="secondFrameNew.htm!" NAME="RIGHT"> 


</FRAMESET> 


The link: 
ee 
<A HREF="SecondFrameNew.html" TARGET="RIGHT"> 


See something new</A> 


Start with the <FRAMESET 


1 include a <FRAME> tag for 
tag to divide the window 


LE] Create a link with the 


into frames (see page 
138). 
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each frame defined by the 
<FRAMESET> tag. Put the 
name of the HTML file for 
each frame within the 
quote marks after the 
SRC= argument. 


Name each frame with 
the NAME= argument so 
that you can target the 
frame with a link. 


<A HREF tag (See page 
52). 


Include the TARGET= argu- 
ment within the link. Put 
the name of the frame 
between the quote marks 
as the target frame. 


Frames 





EG eS html 




















|sHTML> 
<HEAD><TITLE>First frame</TITLE> 

</HEAD> 

<BODY> 

<H1>Left freme</H1> 

This frame can be used to display anything you went. often one frame is used as a 
masthead for a web site or as 4 navigation bar. 

<P> 

<AHREF ="SecondFrameNew hunl” TARGET="RIGHT">See something new</A> 
J 

<A HREF="SecondFrameOld huml" TARGET="RIGHT">See something old</A> 
</BODY> 

</HTML> 













Netscape: Basic Frame Elements 


SS 
Location: | file :// /Macintosh3$20HD /Dean's /HTML /HTML®20F iles%S203r d%620E dtion /!%2OHTML®: ae 


Left Right frame 
frame 

















Something to look at is in 
here. 











This frame can be 
used to display 
anything you 
want. often one 
frame is used as 4 
masthead for a 
web site or as a 
navigation bar, 





See something 
old 
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Home Pages 


The first HTML document that you want people to see when they get to your 
Web site is called a home page. Home pages set the tone for the rest of your 
pages. Whether you design splashy or purely functional home pages, they 


should include certain elements. 


Good home pages describe the service the site provides or tell the user what 
information is available on the site. They instruct new users about unique fea- 
tures or software that is needed. They include an address for feedback. How you 


accomplish this is your decision. 








Home Eait Reload | images | Print | Find ‘Stop 








Netsite: [http //www! whitehouse gov /WH/ Welcome him! 








Good AM lorning 


YY eleo me to the 


White House 


Commonly Requested Federal 


Their accomphshments, ther 2 a Services: 
GE BUs ) Direct access to Federal Sexvices 


faruiles, and how to send them 
electronic m 


Fd 
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Splashy home pages have big 
graphics. Sometimes large 
image maps act as navigation 
for the document as a whole. 
Others have graphic navigation 
bars that repeat on every page. 
Remember, big graphics mean 
your home page will take a 
long time to transfer over the 
Web. A first-time user may 
cancel before the page ever 
loads. 





Designing HTML Documents 








= = Netscape: Center for Astrophysics Organization Table of contents-style home 
(Lee Tx] wom} (ese) [Rerses [mages [ pree [ ree] [Se } pages rely heavily on linked 
Location; [http :/ /cfA-www harvard edu S0/cfsarg htm! s 
text. Sometimes small graph- 
veer Harvard — Smithsonian ics accompany the text. 
Center for Astrophysics || — Everyone knows how to use a 


table of contents, so there is 
no learning curve for this type 
j coe , c of page. Using text exclusively 
Organization of the Harvard - Smithsonian Center means your home page will 
Seer rarts take the shortest time possible 
to transfer over the Web. 


60 Garden Street, Cambridge, MA 02138 


© Atomic and Molecular Physics 
© [TAMP Instrate for Theoretical Aromic & Molesalar Physics 

¢ HichEaes y Astrophysics 

paced sa fnared Acton % 

y Sqences 

© Ratio snd Geoastronomy 
© Solar and Scelles Physics 
© Theorencal Astrophysics 
© Scence Educston Department 


and the following admumustrative and techzical departments 





. 
© Human Resources 
© Contacts and Procurement 
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Structuring Multi-Page Documents— 
Linear 


One way to present information is with a linear structure. A person moves for- 
ward or back through files just like turning pages in a book. One HTML file fol- 
lows the next. Each HTML file includes a link to the next and preceding files. 
You determine the order in which the information is presented. 


You do not need to make a diagram of linear documents; these documents do 
not have complicated connections to keep track of. Just remember to check the 
URLs in the links to the next and preceding files when you add or remove a file 
in the structure. 






Ge Netscope: Linear S==Seereeee 


Beek [forverd or) nue Tmel Bu 4 
Lecation 
Page one 
Que way to preseninformation is with a linear souctre, A persan moves forward or back just 
like turning the pages in a book One HTML file follows the next You determine the order in 
which the information is presented. 


Next 

















a Netscape: Linear 


Back 4 = Reload [wnages | Print | Find 
Location: [fie 77 7Mvcintosh®S20H0 /Dean’s HTML /HTV4L9E20Fles3€203 d%206dtion/'§20HTV1LZO} 


Page two 


Linear structures connect pages with next and back links. Simply put the words next and back 
‘with the comect links in each HTML file Small up and down arrows commonly substitute for the 
‘extin these situations, Next and back links usually appear at the bottom of a pege. Sometimes 
lunear structures include » home page link on every page 
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Designing HTML Documents 


= wis Ts itm! SS ee 

















<TITLE>Linear</TITLE> 
</HEAD> 

<BODY> 

<H1>Page two</H1> 
Linear structures connect pages with next and back links. Simply put the words next 
and back with the correct lnks in each HTML file. Small up and down arrows 
commonly substitute for the text in these situations. Next and back links usually 
appear at the bottom of a page. Sometimes linear structures include a home page link 


on every page. 


<A HREF="38Linear3 html">Next</A> 
<P> 
<A HREF= "38Linear1 html">Back</A> 













= Netscape: Linear 

a Less} a se Ca) i 
Leeatien: 
Page three 
‘You do not need « diagram of linear documents. These documents do not have complicated 


connections to keep track of Just remember to check the URLs in the next and back kinks when 
you add or remove a fle in the structure 


























































Linear structures connect 
pages with next and back links. 
Simply put the words Next and 
Back with the correct links in 
each HTML file. Small up and 
down arrows commonly substi- 
tute for the text in these situa- 
tions. Next and back links usu- 
ally appear at the bottom 

of a page. Sometimes linear 
structures include a home page 
link on every page. 
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Structuring Multi-Page 
Documents—Non-Linear 


One way to present information is with a non-linear 
structure, in which a person jumps between inter- 
connected pages. One HTML file relates to many 
others like a three-dimensional maze. The person 
viewing your documents determines the order in 
which the information is presented from the possi- 
bilities you provide. 


Non-linear structures connect pages with hypertext 
links. Simply put as many text and graphic links in 
each HTML file as you want. Home page links usu- 

ally appear at the bottom of each page. Sometimes 

non-linear structures include linear sections. 


Draw a diagram of non-linear documents. Even 
simple documents have many connections to keep 
track of. A diagram helps you keep track of all the 
files and links, making updates easier. When you 
remove pages, you're less likely to overlook impor- 
tant links if you have a good diagram. 
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Designing HTML Documents 





Lata [ie //cnto¥52OMD one's HTP [MIVA SDOF Nee ZOSr ZOE RZOATHA Y 
Elephants 


‘Some copy about elephants, Then some copy about how they are different from indcand squatue 
bade. 


‘Betura to contents: 





Birds 


‘Some copy about birds and penguins Then some copy sbout how they are different from laree 
mauunalsend susphubiens 







Some copy about biste and penguins. Then some copy about how they are different fom laze 
Gommalsead spe hubians 


enum to ctaars 
‘Betum to contents 


Turtles 


Sama coy shoetarie, Then seme copy shecthow they ere fers om hinkeend aque 


Return to contents 
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Navigation 


Navigation within and between HTML files is important. If you provide good 
navigation, people will find it easy to use your service or purchase your prod- 
ucts. Think about the basic mechanisms needed to get around the files, but also 
think about what makes them easier to use. 


























= eed ae a 


Location: [file 7 //Facintosh%20H0 /Dean's /HTML /HTMLSS20F fles 62031 456 20€ ation /B2OHTMA Bs 


to less 
Whot you need 
Conneedions 


A table of contents is one of the most common 
means of navigation. Each item in the table of 
contents links to another HTML file or to an 
anchor in the same file. A person reads through 
the topics, jumps quickly to one of interest, and 
then returns to the contents. 
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Linear structures connect pages with next and back links, Simply put the words next and back 
with the correct hnks in each HTML file Small up and down arrows commonly substitute for the 
textin these situations, Next end back links usvelly appear at the bottom of « page. Sometimes 
linear structures indlude « home page link on every page. 





Simple paging (or a linear structure, see page 
148) takes little advantage of the hypertext 
capabilities of HTML. One HTML file follows the 
next just like the pages in a book. There are 
times when this makes good sense. For exam- 
ple, no one gets lost in a maze of information 
when paging. 


r= 








Designing HTML Documents 





| Hypertext links 


} A roble of contents is one of the most common means of navigation Each item in the table of 
| contents links to another HTML file or an anchor in the same fle A person reads through the 


‘One HTML fle folowe the nestjost ike the poges ina book There are 
‘times when this makes good sense. For example, no one gets lost im « maze of information when 


paging 
Hypertext links occur anywhere in « document as often as you like = word or graphic can link 
to another file or anchor within the same fileA person clicks on the link and jumps to anew 
location im free form of navigation. 


Linking every HTML fle to your hams panei n ll mporantnavagationl dence. Eventhough 
you designed your files to start at the home page not every person does. That's because any one 

of your flee may be sited in someone else's document, or your fle, not your home page, may show 
| open the result of en index search 


| near suucaure, see page 00) takes lie advanage ofthe hypertext 
Seales Sa AtTML On eae 


Hypertext links can occur anywhere in a docu- 
ment as often as you like. Any word or graphic 
can link to another file or anchor within the 
same file. A person clicks on the link and jumps 
to a new location in a free form of navigation. 





Bak [rvs = Reload Se Find J ry 
Location: [file:7/ /racintosh%820H0 /Dean's HTL /HTPLSS2OF le 203, 95206 4¥ion /952OHTPLI20 


Linking to home 


Nevigation within and between HTML files is important If you provide good navigation, people 
will find it easier to find the information you are providing or purchase your products and services, 
Think about want you need to get arvund the files. But, also what makes them easier to use 


Go to home pore. 





Linking every HTML file to your home page is an 
all-important navigational device. Even though 
you designed your files to start at the home 
page, not every person will start there. That’s 
because any one of your files may be cited in 
someone else’s document, or your file, not your 
home page, may show up as the result of an 
index search. 
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Navigational Aids 


People need help keeping track of where they are in the maze of information 
you can create with hypertext links. They also like Web documents to be easy 
to use. Some simple navigational aids can help on both accounts. These are in 
addition to basic navigation provided by things like a table of contents, simple 
paging, hypertext, and links to home pages, as discussed on the previous pages. 


Clear headings help people know what they are looking at. When properly 
worded, headings concisely describe a file’s content or function. Some headings 
describe how the current file relates to the whole document. 


Netscape: Navigational aids —— 





= 
Beak [rowers] Home S 

Lecation [e:7/Pacntomn520H0 Dean's TPA /HTVAR2OF Nes ZO8rs206sNen /ZOHTLBZO] Latin: [e:/77acesh 62040 Dean's HTP HTH RZOF es 203 dRZOEST 09 /HEZONTL 2 

\Clear headings Page numbers 

Dont over look the importance of page numbers even if they seem incompatible with hypertext 


information structures: Unlike URLs, they are very simple to write down an remember, They 
make sense in linear structures to mdicate length of a document and your current position mit 


Clear headings help people know what they are looking at. When properly worded, they concisely 
describe a file's content or functon. Some headings describe how the current fle relates to the 
whole document. 


Page 1 of 10) 


Don't over look the importance of page numbers even fthey seem incompatible with hypertext 
information structures, Unlike URLs, they are very simple to write down an remember. They 
make sense in linear structures to indicate length of « document and your current position in it 
(Le. page 1 of 10) 


Most people are impatient and Inzy when it comes to navigation. They want to know their options 
at the top of a file and they don't want to scroll back when they get to the bottom Repeatthe 
game navigation options at the top and bottom of each file ifitis deeper than a standard computer 
screen 








Clear, concise headings communicate quickly, Page numbers give a person a sense of place 
allowing a person to decide whether to stop or within a large document. 
go on. 
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Don’t overlook the importance of page numbers, even if they seem incompa- 
tible with hypertext information structures. Unlike URLs, page numbers are very 
simple to write down and remember. They make sense in linear structures to in- 
dicate the length of a document and your current position in it (for example, 


page 1 of 10). 


Most people are impatient and lazy when it comes to navigation. They want to 
know their options at the top of a file, and they don’t want to scroll back when 
they get to the bottom. Repeat the same navigation options at the top and bot- 
tom of each file if it is longer than a standard computer screen. 


ILooation : [Fie :// Macintosh 20HD /Dean 's HTML /HTMLGS20F fhes 20rd 20E tion /EZOHTML B20) 





Top and bottom navigation 


People need help keeping track of where they are in the maze of information you can create with 


h 

hypertertlinks. They also ike web documents to be easy to use, Some simple navigational aids 
ean help on both accounts, These are in addition to basic navigation provided by things like a table 
of contents, simple paging hypertext, and links to home pages, as discussed on the previous 
pages 


Clear headings help people know what they are looking at When pro, ‘worded, concisely 
(oer 4 file's content or function. Sena kesiings desenbe how the es fle: ants the 
ole document. 


Dan overlook the mporuance of page numbers evenifthey seem incompachle with hypete 
information structures. Unlike URLs, they are very simple to write down an remember. They make 
sense m linear structures to indicate length of a document and your current position i it (i.e 





of contents, simple paging hypertest, and links to home pages, av discussed on the previous 
pages. 


Cleer headings help peaple know whot they are locking ot. When propecly worded, they concisely | 
deaeibe af cont erRacion ieuladay tchiey aorta oa 
whole document 


Dantt over ook the importance of page numbers even if they seem incompatible with hypertext 
information strucmes. Unlike URLs, they are very simple to wate down an remember. They make | 
Sense in near erates te nce length of «document and your Curent peeion nit (18 

page 1 of 10) 


‘Most people are impatient and lazy when it comes to navigation. They want to know their options 
people are sup; ey gs 


athe top of a fle and they dont want to scroll back when they get to the bottom Repeatthe | 
saune navigation options at the top and bottom of each fle ifit is deeper than a standard computer | | 
screen 


Tabac to content 
Gow nerpae, 
Gotolastp 








Navigation options at the top of a file avoid 
having to hunt for options within the text. 





Navigation options at the bottom of a file pro- 
vide logical next steps in the information flow. 
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Design Issues 


Design on the Web means two things: structural information design and 
graphic design. The previous pages cover some basic structural design issues and 
suggest techniques for organizing the information. Other books go into greater 
depth than this book has space for. 


When it comes to graphic design, electronic publishing with HTML is similar to 
desktop publishing. Software, however, does not make you a designer; if you 
know you are bad at design, don’t try. Hire help. Stick with text. Keep it simple. 


If you can design, knock yourself out. Remember that a few factors remain out 
of your control. 


Sa Netscape: NVArtsHome.htm! aS 


(ost Tee) Cem) (ome Dee re Le] Cm] 


Location: he 11 Petenie Noah ZOHO [be en's HTML ATPL W20F Nee BZ0Br THZOE Aion /HIONTHE MIOF Hrs IOI GIES 


July 1, 1995 |) The Web Magazine About Art in New York City |) Val.1 No.1 


























Joly 1, 1995 LILLT The Web Magazine About Art in New York City L111 Vol Not 


(Design P ing. a ~ “Sculh lpr Performa || Design, Paint Photogra Qh A Scul ture Performance |) 


Ee eviews woundtown sponsoredbyAg@ == 


: 


Museums oun and exhibitions, sponsored by Chubb 
a - ov 





The available fonts and typestyle preferences on This is the same file as that on the left, 
the user’s computer can differ from those on your viewed with different font preferences. 
screen. 
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Netscape: NVArisHome.ntmt 
Bri [=] Howe J Briond [ensors | Pret | Fat} 
Location: [fle 77 /Mecintosn S200 /Oy an s HTP JTF S20F ies 205, gRZUE Aton /VRIOTPLEIOF es IOEr AIOE] 


a 





July 1, 1995 |i) The Web Magazine About Art in New York City || Vol. No.1 


Design, Painting Photography, Sculpture, Performance 
‘Shows and reviews around town, sponsored by Agia. 
Judy 1, 1995 |j|\| The Web Magazine About Art in New York City ||| Vol.1 No.1 > 
Museums 
Hours and extubraons, sponsored by Chubb 


if 


Design, Painting, Photography, Sculpture. Grants and residency y-progcams 


‘Sources for arts fanding sponsored by | 


Shows and reviews around town, sponsored by Agfa ie 


Employment operrunities mn and around New York City 
5 


Museums Book reviews and Magazines 
Hours and exhibitions, sponsored by Chubb Recently polished matenal, sponsored by Barnes & Noble 














A rescaled browser window can crop graphics Long load times for those big graphics you 

and rewrap text, causing different line breaks. spent hours on can cause people to cancel 
Graphics meant to appear together on one line before they reach your page. Also, keep in mind 
may stack instead. that some people on the Web browse with the 


image loading turned off. 
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Beyond Design 


The reason for any HTML document is the information, product, or service it 
provides. The text, graphics, sound, and video files all support that goal—they 
make it useful, easy, clear, and convenient. Sometimes the right text in the right 
place accomplishes this in a big way. 


Include notes on external files. For FTP links, include file sizes. This helps the 
user estimate how long transfers will take. People can decide if they really want 
the file and then decide when to schedule a download and how to make room 
on their hard disk. For sound and video, include the format and file size (see 
page 86). 


Date your file in the text, just like newspapers or letters, so that people can tell 
at a glance if they’ve already read the file. Or include a “what’s new” page for 
each update. 


Leave behind a pointer page when you change your URL. It is just like getting a 
recorded message when someone changes their phone number. Pointer pages 
don’t have to be pretty, just effective. At the old address, provide the new 
address along with any important messages. Include links to URLs that people 
expect to find, as well as related URLs. 
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@ What's New at CEPS? 

Center for Earth and Planetary Studies (CEPS) 
® Research at CEPS 

® Regional Planetary Image Facility 

®Space Shuttle Photographs 

® Apollo Manned Space Program 


®Geo hy From Space 
®Science Information Infrastructure 
® National Air and Space Museum Home Page 
2 Last revised: August 23, 1996 (vp) 
Questions and comments to: maucle @ceps.nasm.edu 


Fed CASTLE PAGE (Smithsonian Institution Home Page) 








1 | A “what’s new” link gives 
people a quick way of 
skimming the current doc- 
ument highlights. 


Dating the file in the text 
tells people at-a-glance if 
they have read it already. 


E-mail links are a conve- 


nient feature in some 
browsers. 
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Comments in Programming 


You can insert lines of text in your HTML files that browsers will not display; 
these are called comments. Comments allow you to annotate your HTML pro- 
gramming so that your notes remain a part of the file itself. Every line of a 
comment begins with the <! tag and ends with the > tag. Do not use any other 
tags inside comments, as these will confuse some browsers that display the 
comment instead of ignoring it. 


Use a comment when you want to remember something special about your file, 
for example, why you used certain URLs or gateway scripts. 


1 3 
le aks 


<!First line of comment.> 


<!None of these comments will appear on the screen.> 





<!Last line of comment.> 


ER Start by placing the open- A Put every line of comment Ei End with a closing > 
ing <! tag in front of the between its own comment symbol after every line 
comment. tags. of comment. 
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= = 07861-61.htmi = 

ims sd 2 Jie) (Biz) a ena 

fem i ==) (SS) HS) (i 
(RGR ae Sree. 











|kHTML> 
<HEAD><TITLE>HTML Comments</TITLE></HEAD> 
<BODY> 

tha meee oe files</H1> 
Put any cop 












it wont appear on t d with a browser. 
<!This comment will not appear on the browser screen.> 
<!This comment will not appear.> 

As irks. 


Location: | file :// /MacintoshS20HD/Dean's /HTML /HTML®20F ilesS203r dB 20Edtion /!S2OHTMLB20 


Comments in HTML files 


Put any copy you want in 4 comment. 
It won't appear on the screen when viewed with a browser. As you can see, it works. 
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Consistency in Programming 


You should format HTML word processing files in a consistent and logical way 
for your own benefit, not for the browser’s. Browsers don’t notice how you for- 
mat your files, they only notice the tags. They ignore extra returns and spaces 
unless you tag the copy as preformatted text (see page 82). 


Whether you type one continuous line of code or put a return after every 
word, both documents look the same when browsed as long as the content 


is identical. 


Whenever possible, format the file so that it mimics the look of the browsed 
file. This makes it easier to visualize the browser page and find mistakes. Isolate 
key elements on separate lines so that you can check them at a glance. Find a 
consistent way of formatting files that makes sense to you and stick with it. 


07861-62a.htm' 


| fines i) 2 Bizt) fers) eh 


yl faced 
ee S5 Se E S eo a 
re eee ee 





<H1>Order form</H1>. 
«<FORM METHOD="POST" ACTION="/binvorder"> 
Name:<input type="text" size=40 name="Name"><BR> 
Billing address:<input type="text" size=40 name="Billing”> 
OR P= 
How many of each do you want to order?<BR> 
<input type="number" size=3 name="Pens">Pens<BR> 
ee type="number” size=3 name="Penails">Pendls<BR> 
> 


Which credit card do you want to use? <BR: 

<input type="radio" neme="card value="Visa">Visa<BR> 4 
<input type="radio" name="card value="MasterCard">MasterCard<BR> 

<input type="radio" name="card value="Amex">Amencan Express, 

> ——————————— 


Credit card account number'<input type="number" size=40 
name="COnumb er" >< EER > eee eS 
eee date (month/year):<input type="number” size=40 name="Expiration"> 
<HR> 

<input type=submit value=" Plece this order “> 

<input type=reset value=" Erase this order"> 

</form> 


<BODY>. 
<tt> — 7 








162 


[ER Put each tag in the HTML 
header at the top on a line 
of its own. 


Put elements like headings 
on lines of their own. 


Put rules on their own 
lines. 


gl Use the identical order for 
arguments of each radio 
button, check box, and 
selection list. Put every 
item on its own line. 


Put paragraph breaks on 
their own line so that they 
look like the line space 
they create. 


[Gi Put line breaks at the end 
of the line where they per- 
form their functions. 


Put each tag in the HTML 
footer at the bottom ona 
line of its own. 
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= = 07861-62b.htmIi 
_ BV) 4S) Big ) Ges 

fom Ie SSS) Cee) Ge) Ceeei) til) a | 
eee SSE A SES a, Sees eae esas | ee poe ity a ee 


pte 
aera es rs 

























<TITLE>Messy Form</TITLE></HEAD><BODY> 
<H1>Order form</H1><FORM METHOD="POST" ACTION="/binvorder"> 
Name:<input type="text" size=40 name="Name"><BR> 

Billing address:<input type="text" size=40 name="Billng"><HR> 

How many of each do you want to order?<BR> 

<input type="number" size=3 name="Pens">Pens<BR><input type="number" 
size=3 neme="Pencils">Pencils 

<BR><HR> Which credit card do you want to use?<BR> 

<input type="radio" neme="card value="Visa">Visa<BR><input type="radio" 
name="card velue="MasterCard">MasterC ard<BR><input type="radio" name="card 
value="Amex">American Express<P> 

Credit card account number:<input type="number" size=40 
neme="CCnumber"><BR>Expiration dete (month/year):<input 

type="number” size=40 name="E ypiration"><HR> 


ee aneretes 


<input type=reset v 


<few> “BODY wr [cen] ea) [vo [oe [et LP 
Location: [file:// /Macintosh3820HD /Dean's /HTML /HTML2OF iles% 203+ d%620E dtion /!%20HTML%2 


Order form 




























Name: 
Biles address: 


How many of each 40} you want to order? 





Which credit card do you want to use? 
OVisa 

MasterCard 

American Express 





Credit card account number-[ 


Expiration date (month/year): 
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Testing 


Before posting any pages, you have to test them. Programming is inherently 
buggy even when it is as simple as HTML. You should test your files locally and 
keep them all on your own hard disk off any network before you post them on 
the Web. View them with several different browsers, not just your favorite one. 
You will discover differences that may be important enough to warrant changes. 


Besides the obvious examples on the next page, make sure you check the follow- 
ing list. Keep in mind, though, that many of these items are difficult—if not 

impossible—to check until the HTML files are posted on the Web server. You can 
arrange to post pages that require a password for viewing so that you can test | 
everything before it is made public. 








@ Spelling. Spell check the file or ask someone else to proofread the screen for 
you. 


@ Navigation. Make sure every page has the necessary navigation and that it 
works correctly. 


@ External files. Place graphic, sound, and video files where they can be found 
and loaded. Include alternate text for non-graphical browsers. 


@ Load times. Are they acceptable or are they too long? 


Forms. Do the gateway scripts work properly? 


@ Dummy test. Have someone new to the document run through it; some- 
thing is bound to turn up that you never noticed. 
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= Netscape: Lists === 








(eee) (eet [ersoes [pret [ree] 


Location: [Fite // 7-tacintosh3820HD /Dean's (HTML /HTML S206 Nes 6203+ 49620 ation / "EZOMTMEL 


















SS = Netscape: lists = = 
oak Hore tan Reload | bmages | Print ce 


Location: [fie :///1tacintosh'20HD /Dean's/HTML HTML ZOF Nes 203+ d5820E dthon /'SZOHTML R20) 
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Lists 


Lists come in two basic vaneties: ordered, with numbers and unordered, with bullets. Both ands 
indent the list from the rest of the copy. 


This is an ordered list Ithas numbers m front of every list item starting with the number ten. 
10. Item 
11, Item 
12 Item 
13. tem 
14, Item 
‘This is on unordered list It demonstrates the different bullets types in front of ist items 
© Item 
Item 
© Item 


© Item 
2 Item 


In this example, a missing closing tag for a 

heading drastically changed the look of the 

browsed file. The heading style remained in 
effect for the rest of the text. 





Linked Graphics 


Linked graphics allows a person to click on aimage and jump to another fle. This abibry can 
make your documents easier to use. Good dear graphics communicate quickly and enhance the 
usablty of your document. The linked graphic shows up outlined in color depending on the 
preference settings of the browser. 


[Chick the picture to learn more sbout my new dog 






















Lists Lists come in two basic varieties: 
ordered, with numbers and unordered, 

with bullets. Both kinds indent the list 
from the rest of the copy. 


This is an ordered list. It has numbers in 
front of every list item starting with the 
number ten. 


10. Item 
11. Item 
12. Item 
13. Item 
14. Item 


This is an unordered list. It demonstrates 
the different bullets types in front of list 
items. 


-Item 
«Item 






































== Netscape: Linked Graphics 


Cee PD) Cea) (ewes [re Le) Co 


Location [file /7 /Macintosh38 2040 /Dean's (HTP /HTMLS2OF ilesS8203r ¢%20Edtion /ZOHTMLW2O] 


Linked Graphics 


Linked graphics allows a person to click on # image and jump to another fle This ability can 
meke your documents easier to use. Good dear graphics communicate quickly and enhance the 
aseblry of your document. The linked graphic shows up outlined in color depending on the 
preference settings of the browser 




















Eick the picture to leam more sbout my old dog 


Click the picrure to leam more about my new dog. 





In this example, a misplaced graphic file or 





incorrect URL stopped the browser from loading 
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Posting Pages 


No one will see your HTML files unless you post them (make them accessible) 
on a server in a network. 


You can post files on a server in a closed network, like one at work, if you want 
to restrict viewing to people in that network. Or you can make your HTML doc- 
uments available to everyone browsing the Web by placing them on an Internet 
server. Some Internet servers also restrict access to files. For example, you may 
have to subscribe or obtain special clearance. 


Send your HTML, graphic, cet 7 








| J Je wa) es ee oo 
sound, and video files along a SL Ie) ee ae 
with any gateway scripts to the REND» TE teed Opes HEAD? 
server. You can do this over Sele Sank sign nlm mertr tT 
the Internet or by sending a quay an whut ten spe rene The ed pe owe oy 

: a Seedpeer seg oe woe 
disk to the server administra- “ARE ~OlDop > MG SRCWDogl gf > dA» Che pee am 
tor. Use the method the SAHRER-"MYewDophenl'> <IMG SRC="Deg? gf </A> Cloke pcre tla 


more about my new dog <BR» 
</BODY> 


administrator prefers. 
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The people operating the server you work with govern how you post pages to 
the server. If they like do-it-yourselfers and your files are small, you can proba- 
bly transfer them over the Internet. Otherwise, you just send a disk and the sys- 
tem administrator does the rest. It’s a very good idea to recheck all of the links, 
scripts, etc., to be sure they all work as soon as the pages are posted. 





Many individuals browsing the Web can 


The server holds all your files view your HTML documents at the same 
and gateway scripts on a hard time when they are placed on an Internet 
disk and makes the files avail- server. Each computer requests a file from 
able to Web browsers. It runs the server by using its URL address. 


your gateway scripts and returns 
the results. Internet servers 
make files available over the 
high-speed data lines to other 
Internet servers and to comput- 
ers with modems over dial-up 
connections. 
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Finding a Server 


New Internet servers are popping up all over; you don’t have to look very hard 
to find one these days. Most large corporations, government agencies, research 
institutes, and colleges and universities have servers. If not, they are most likely 
planning to set one up in the near future. 


Check for a server where you work or study before you search for a commercial 
server for your files. It could be available to you free of charge. Ask the network 
administrator if you can use it. 


To find a commercial server, start by asking friends and colleagues. Someone 
you know probably researched the topic recently and can save you time. If not, 
surf the Web and look for e-mail addresses of the commercial servers. See page 
174 for a short list that can get you started. 


Students and faculty can usual- 
ly arrange to post pages on 
college and university Internet 
servers maintained by different 
departments on campus. 

















About Northwestern 


Admissions & 
Financial Aid 





Netscape: IUBio Archive for Biology data and software ————_-@ 5 







Events, Activities 
& Performances 


Northwestern Calendar of Events a 
[Help] [Index] (Search) [Directory] [NU 






Internet Directory of Biotech Resources 


IUBio Archive 


TUBio Archive is an archive of biology deta and software, The archive includes items to browse, 
search and fetch molecular date, software, biology news end documents, as well as links to remote 
information sources in biology and elsewhere. See also the Gopher door and the FTP door. 


Eien | IUBio-Softwere+Data 


TUBio Archive of biology software and data resides mainly in this section, andis also 
accessible via anonymous FTP. 


[text_] |About-IUBio-Archive [ (Dec96, 18kb] 














About Northwestern 





Includes en introduction to the University, a w 
Bienen, phone & email directories, NU news, 
























[menu_] |FlyBese @IUBio Gopher 
A portable Drosophila database contaming pret and other information collected from 
current and past studies on these species of fruit fly. Gopher view at IU. 












Researchers commonly post 
pages for the purpose of shar- 
ing information between 
facilities around the world on 
Internet servers maintained by 
the research institutes they 
work for. 












[xext_] |FlyBase @IUBio HTML 
A portable Drosophila database conteining genetic and other information collected from 
current and past studies on these species of fruit fl 
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Employees may work for a 
company with an Internet serv- 
er of its own. However, corpo- 
sue ELE A ALLS ea rations operate these servers 
for business and tightly control 
who and what gets posted. 






















Location : [http ://sunsite uno.edu/expo/deadsea scrolis.exhibit/intro.htm) 


Welcome to 
| SCROLLS FROM THE DEAD SEA 


| The Ancient Library of Qumran and 
| Modern Scholarship 













Civil servants may work for 
a government agency with 
an Internet server of its own. 
You cannot use it for private 
purposes. 


an Exhibit at the Library of Congress, Washington, DC 
| The sean Scrolls From the Dead Sea: The Ancient Library of Qumran and Modern 


a selection from he scrolls which have been the 
Netscape: iQuest materia jnestions have be en raised about the scrolls’ 


about the period in which they lived, about the 
Pore Ce) (Retead [images [ print [Find] of the scrolls’ custodians in restricting access. 
intext of the scrolls and the Qumran community 
Location: http :// / 
RSG SA SS ca the star a{ thal navi 2 nC yeatg Tiree 
standing of the challenge s and complexities 
Baath | 
| 
WEB DEV | | NTH 
PERRET scqucot internet, a iniieniplis based i 
is leader in lateret technology. With o: 
pr eviding ¢ comunercisl Intemnet Services, [Quest ranks among the top 
THe iNoY ust |] Internet Providers in the country 
Pee IQuest serves Indians with the largest pool of high-speed modems in the 
Essa) state [Quest dislup access.is available in Indienapolis, Colt: 
Bloomington, Terre Haute, Kokomo, Marion, Pers, Anders 
eels 



















net Service Pronder (ISP) 
ne highest speed 
















Auncie, 
has service} 





Commercial servers offer 
access accounts for all Internet 
services and provide space to 
post Web pages. Fees and 
rates vary. 





Logansport, Lefayerre, Prenkfort, and Ft. Wayne. [Quest 
sveilithe cago, Illinois 














Quest connects 
dedicated connect 





number of companies to the Internet with 
at speeds ranging from SSK bps to 1.544M bps 
(T1), With IQuest’s svailable high bandwidth Internet connecuon, we exe 
one of the few ISPs that can guarantee our customer's bandwidth to the 

Intemet. [Quest is never the bottleneck for our customer's Internet 
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Should You Set Up Your Own Server? 


In the past, setting up an Internet server has been a big undertaking. The hard- 
ware and software were complex and required significant technical expertise. 
They also cost a lot of money. 


It’s no longer true that a server will be prohibitively expensive. Relatively inex- 
pensive all-in-one Web servers are now available that come bundled with hard- 
ware and software. But, don’t underestimate the money required to connect to 
the Internet with a dedicated line. 


Until recently, individuals and small businesses have not considered setting up a 
server; it has been just as easy to rent space from a commercial server. However, 
many individuals are now setting up servers due to dropping costs. 


Groups that should consider setting up a server include the organizations like 
those that you see on the Web already: corporations, schools, museums, and 
research institutes. They tend to be large and have equally large capital expendi- 
ture budgets for computer equipment each year. Commercial enterprises that 
expect significant income from Web services should consider setting up a server. 


Are you considering setting up your own server? If your answer to these ques- 
tions is more often no than yes, consider space on a commercial server instead 
of setting up your own. 


Historically, servers operated 
on a UNIX system had full- 
time system administrators. 
Recently, there’s been a flood 
of PC and Macintosh software 
for this. There are several 
servers that individuals might 
use for Windows for a simple 
Web site. Windows NT is fast 
becoming the platform of 
choice for new Web servers in 
corporate settings. 
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Is Web publishing the best way to distribute your information? 
Is a server part of a long-range strategy for your organization? 


Does your organization need control of the server for 
security reasons? 


Do you have the equipment and software already? 
Do you have the know-how to set up and maintain a server? 


Do you have the time it takes to be a system administrator or 
do you have a full-time system administrator on staff? 


Can you afford to hire a full-time system administrator? 
Do you need to have a programmer for the server you set up? 


Can you program or do you have a programmer for the UNIX 
platform? 


Do you have or can you afford a high-speed connection to the 
Internet? 


Do you know all the costs involved? 


Can you afford all the costs involved? 


Yes 


Posting Pages 


















































O 
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Setting Up Your Own Server 


Once you decide to set up your own server, you need to design a system that 
meets your needs. There are more and more companies that sell out-of-the-box 
hardware and software systems at affordable prices. Sales representatives are 
eager to help. 





Local telephone companies provide connections to the Internet. They sell or 
rent equipment that interfaces their line with your network. Shop around; your 
local baby bell isn’t usually the cheapest source. T1 lines are the most common 
connections. They are reasonably fast for the money. An ISDN line provides an 
inexpensive alternative if you use the line for only a part of the day and don’t 
expect a high volume of traffic. You pay a monthly fee for the line and a rate for 
timed usage. 


If you are interested in running a simple server for yourself or a small company, 
you should look at the book Running a Perfect Web Site, Second Edition, by Stephen 
Wynkoop. It includes a CD-ROM with server software for several platforms. 


Ask yourself these questions: 


@ Do you want a Web server or a full-featured Internet server that includes 
other Internet services, like e-mail and Gopher? You can get a cheap e-mail 
account at a local access provider rather than setting up a mail server of 
your own. 


@ Do you need to transact business or is the server for purely informational 
needs? Secure systems cost more. 


@ How fast a transmission line do you need? Higher speed equals higher cost. 


@ What platform should you operate? Choose one that makes sense in your 
LAN. 
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A server begins the list of 
equipment you need. You will 
want to get a fast one with 
expandable memory and the 
capability of attaching multiple 
hard disks. You may also need 
a router, which manages the 
flow of data from other nodes 
on the Internet. It receives 
packets of information from 
other servers, reads the URLs, 
and sends them on to their 
destinations. 


A system administrator will 
set up the server, maintain it, 
update software, troubleshoot 
problems, and manage file 
transfers. 
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Short List of Commercial Servers 


There are hundreds, perhaps thousands, of companies selling their services as 
commercial Web servers. Here are just a few of them. Most of these servers are 
large national service providers. You may also find local providers in your area. 
Some of these providers also provide their services as Web authors and designers 
if you need to outsource that work. 


Server 
Atlantic 


Aztec Internet Services 


URL 


http://www.atlantic.com/ 


http://www.aztec.com/pub/aztec/ 





Branch Information Services 


http://branch.com/ 








Catalog.Com http://www.catalog.com/catalog/ 
top.html 
CERFnet http://www.cerfnet.com/ 





CommerceNet CyberGate, Inc. 


http://www.commerce.net/ 





Cybersight Services 


http://www.cybersight.com/ 





Digital Marketing, Inc. 


http://www.digimark.net/ 





Digital Planet 


http://www.digiplanet.com/ 





Downtown Anywhere 


EarthLink Network 


http://www.awa.com/ 


http://www.earthlink.net/ 





ElectriCiti 


http://www.electriciti.com/ 





Electric Press, Inc. 


Great Lakes Area Commercial 
Internet 


http://www.elpress.com/ 


http://www.glaci.com/ 





Home Pages, Inc. 


http://www.homepages.com/ 





Internet Distribution Services 


http://www.service.com/ 





ECHO 


http://www.imperative.com/ 





Internet Information Systems 


http://www.internet-is.com/ 





HoloNet 


http://www.holonet.com/ 





IQuest Network Services 





NetCenter 
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http://www.iquest.net/ 
http://netcenter.com/ 


a 





NETCOM 
NetMarket 


New Jersey Computer Connection 


The Pipeline 


Posting Pages 


http://www.netcom.com/netcom/ 
prodserv. html 


http://netmarket.com/nm/ 
pages/home 


http://www.njcc.com/ 


http://www.pipeline.com/ 











Primenet http://com.primenet.com/ 
featured. html 

PSINet http://www.psi.net/ 

QuakeNet 


http://www.quake.net 





Quantum Networking Solutions 
The SEAMLESS WEBSite 


http://www.gcr.com 


http://seamless.com/ 
chambers.html 








The Sphere http://www.thesphere.com/ 
SSNet http://ssnet.com/ 
Stelcom 


http://www.webscope.com/ 





Streams Online Media Development 
Televisions, Inc. 
The Tenagra Corporation 


TurnPike Metropolis 


World Wide Access 
Z-Depth 
WinNET 


http://streams.com/ 
http://www.tvisions.com/ 
http://arganet.tenagra.com/ 


http://turnpike.net/turnpike/ 
metro.html 


http://www.wwa.com/wwa.html 
http://www.zdepth.com/ 


http://www. win.net 
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Costs 


Servers are definitely in business to make money. They do this through service 
fees, monthly rates, and commissions. Charges vary widely from server to serv- 
er. You will not necessarily encounter all three costs at every server. Call a few 
to compare pricing and ask a lot of questions. Try to negotiate a better deal, if 
you can. 


Large servers offer turnkey solutions. Staff programmers and designers do every- 
thing for you. You can also hire freelance programmers and designers at reason- 
able hourly rates. 


Most servers charge setup fees when you first post your pages. The fees can 
cover programming that enables the server to track usage and generate reports 
that tell you how many people look at which pages each month. Additional fees 
are charged for any work that you ask the server to do for you, such as program- 
ming or screen design. 


Servers may charge monthly rates for keeping your files posted. Some ask you 
to commit for a three-month minimum to start. They base their rates on the 
megabytes of hard disk space you require and the megabytes viewed per month. 
If you are in a retail business, you can find a server that processes credit cards 
for a fixed rate. 


SSS Some servers have lower fees 
[Bick [Forvers] Home] [Reload [mages [ Print [Find and rates but get a commis- 
Leow [nas Aww cert. net/eortnt /earvines/eerenes Mn) sion on the sale of your prod- 

cE = : ucts in a type of partnership. 

Their profits rise with yours. 
They may charge as much as 
3 s 10% of gross sales for posting 

; your pages, taking orders over 
ee the Net, and forwarding them 
to your fulfillment facility. 
They get paid whether you get 
oe eens your money from the customer 
or not. 


Service Summary and Price Sheet 


Look here for a quick summaries of CERFnet's services and prices. 


Get A Quote Here 


Fill out this brief form and we'll send you @ quote for the service or 
services that you need. 








Internet Connection Services 
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Some commercial servers 
[esi] [Reload [images [ Print [Fina _] charge a maintenance fee and 


Location: [http://www psinet? percentage for credit card 
processing. 












ment 


Products and Services 
“ Welcome to the PSINet Web site. We provide worldwide Intemet 
sohitions for business customers to help them reduce costs, boost 
productivity, and tap into new markets. 
The information youll find here should make it easier for you to 
E choose an Internet service provider for your company. Whether 








youve with a small business that's considering Internet access for 
the first time, or ¢ multinational corporation with enterprise-wide 
requirements, PSINet can deliver the solution thet's night for you. 














Strategic Partners 


ee 
Sw 


Business Development 


News Specials! 



















Some commercial servers 
have lower fees but take a 
commission on gross sales. 


New! 
April 13, 1996 

Home Pages, Inc. announces that is has been aquired by Novo 

Media Group 





We are a full-service World Wide Web site development and 
production company loceted in the heart of Silicon Velley. We offer a 
complete range of services for companies of all sizes. This includes 
web site hosting design, custom programming, on-line commerce, 
and unique software tools to help you and your organization do 
business on the web, 





JavaScript demo of the IRS 1040 tax form. 







© What's New 
@ About Home Pages” 
es 


Semices 
© Site Solutions m Action 
© Tools forthe Trade 
© Contacting Home Pages, Inc 
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Checkups and Updates 


You should check your posted documents over the Web periodically. Make sure 
the files are found at the URL you publicize, that they work correctly, and that 
the information is still up-to-date. 


Things can go wrong over time as system administrators reconfigure servers. For 
example, files can be mistakenly deleted, renamed, or moved from the correct 
directory. If they are, links, graphics, and scripts will not work, especially if you 
used absolute path names. 


Updates involve adding, deleting, or revising pages and links. You have to be 
certain that changes you make do not introduce any errors. Perform the tests 
you ran when first posting your pages (see page 164). 


Update your files the same way you posted them to the server originally (see 
page 166). You can send them over the Internet if a few small files need updat- 
ing. Be sure to arrange this with the system administrator. 


This message results from a 


Netscape is unable to locate the server: bad server address in the URL. 
www.psi The server does not have a DNS entry. 
Check the server name in the Location (URL) and 


try again. 
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Checkups add a few items to the normal testing procedure conducted before 
you posted the files. 


@ Is your home page located at the correct URL? 

@ Are the linked pages, graphics, and gateway scripts at the correct URLs? 
@ Do links work? 

@ Do graphics load? 

M@ Do gateway scripts run? 

@ Do forms send input to the correct gateway script? 

@ Do responses, if any, return to browsers from gateway scripts? 

@ Do you get the correctly processed data from gateway scripts? 

@ Are links to other people’s documents still valid URLs? 

@ Is the information still current and relevant? 

@ Are pointer pages in place for files that moved to new URLs? 

M@ Do searchable indexes have your pages listed in their databases? 

@ What do usage reports from the server tell you about your document? 


@ Did you address issues brought to your attention by users? Your home page 
should have your e-mail address in case users find something wrong. 


= Netscape: File Not found ———————————————_ | This message comes froma 
server that could not find the 
Leeson: ftp :/ wh gov om h file you requested. The path 
File Not found or file name portion of the 
URL is incorrect. 


The requested URL /nnn html was not found on this server. 
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How To Find Things on the Web 


Automated search engines help you find things on the Web. Search engines are 
like the information booth at a mall; you tell the person at the booth what you 
are looking for, jewelry for example, and they give you a list of stores that may 
have what you need. They also show you where to find the stores in the mall. 


All search engines work pretty much the same. You fill out a form that defines 
the search parameters and words you want to find, and the engine searches for 
URLs (file names), titles of documents, linked text, and URLs in linked text. 
When it completes the search, the results are displayed on your screen as links 
to the files that match your search criteria. You can then use the link to jump 
directly to the file. 


Some search engines include many topics; others are limited to specific techni- 
cal databases, individual journals, or libraries. Some searchable indexes are listed 
on the facing page. Some are slow but contain a wealth of information. Others 
are quick but less thorough. Find one that indexes the kind of information you 
are looking for. A search engine usually makes available an explanation of its 
content and method of compiling it. 


Another way to find things on the Web is with the help of a directory. A 
directory is like the card catalog at a library or the table of contents in a book. 
You look through the lists of pages for one that interests you. Most of these are 
grouped into listings of related topics to help you find these by topics. The 
CERN WS3 Servers, Yahoo, and EINet Galaxy pages listed on the next page 
include directories. 





s = Gi) Choose part of the Web 
tsoatin Iara. home yan WY ea documents that you want 
WWWW - WORLD WIDE WEB WORM the engine to search. 














Please note our new address: hitp://wwww.cs.colorado,edu/wwww 


EA Choose one of the search 
25) rest of the Web 94 Best Navigational Aid. Olver MeBByan methods. 


EE] Type the words you want 
to search for. 














Choose the number of 
matches you want to see. 
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Getting Your Files Noticed 


Some Web indexes 
Search Engine URL 











AltaVista http://www.altavista.com 
Excite http://www.excite.com 
Infoseek http://www.infoseek.com 
Lycos http://lycos.com 
WebCrawler http://webcrawler.com 
Yahoo http://www.yahoo.com 





For a larger list of search engines and directories, see the W3 Search Engines 
page at http://cuiwww.unige.ch/meta-index.html. 


= Netscape: dog The search engine returns the 


[rome] Cea] See [oeee [rot [| results as a list of links. 
ew SS 


dogs 


Return to Searching 


Actual keywords used: dogs 


1. Kenneth's Reservoir Dogs Homepage 
© cited in: http://colargolidb lust no/~kennetha/dogs hunl 


2 Kenneth’s Reservoir Dogs Homepage 
© cited in: http /oolargolidb hast no/~kennetha/dogs html 


3, Unique Conce Concepts, Inc. dogs cats treats gifts holidey birthday 
© cited m: htrps/branch convtreats/tests. html 


4. Kenneth’s Reservoir Dogs Homepage 
© cited in: http./colargol.idb hist.no/~kennetha/dogs html 


5. Kenneth's Reservoir Dogs Homepage 
© cited in: http/colargolidb histno/~kennetha/dogs html 


WWWW found more than Smetches 

Search with « sharper keyword choice or request more matches 

WWWW returmed S matches above: 

Ifyou received an empty retum list but expected a non-empty one, please read here. 
Return to Searching 

WWWW is being developed by Oliver McBryan 
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Getting Your Files Noticed 


One way to get your files noticed by people browsing the Web is by listing them 
with searchable indexes (some of these indexes are listed on page 180). Find the 
ones that fit your audience: if your audience is wide, list files with a general 
interest index that includes many topics; if your readership is targeted, find an 
index limited to special interest areas. 


You should check all indexes periodically for your files. Some indexes collect 
information automatically, others require you to submit your URLs to the data- 
base through a form. Conduct test searches that should result in matches to 
your files. Use words that other people would think of using, not the word you 
know results in a match. Remember, indexes search for URLs (file names), titles 
of documents (which are different from the file names), linked text, and URLs in 
linked text. 


There are offline ways of getting noticed as well. 


@ Use traditional media for publicizing your files. People still read, listen to 
radio, and watch television news programs. Press releases can get you in 
those media. 


@ Advertise if you have the budget. 
@ Include the URL in the address block of any printed materials. 
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= Netscape: WebCrawler Add UALs = 


(efor) Cor) (ovelewe 


/ dweborawler com/WebCrawler /SubmitURLS html 





Getting Your Files Noticed 





Some indexes ask for very 
basic information, which they 




















Some indexes ask for detailed 
information for their databases, 
which you are responsible for 
providing. 


If WebCrawler doesnt find a Web page that you thik belongs m our index, you can submit the 
URL for that page and up to 9 others using the form below. Please note thet redirected URLs ere 
automatically resolved to the correct server, and will appear this way in the index 


Using the box below, type the URLs you wish to submit You'l need to type the full address 
starting with hrtp2// or ftp// or gopher// and type areturn after each one 


use later to index your files 
automatically. 


Browse Special Add URL 
























http: 77 


Additional Categories: 









Geographical Location of Resource (If applicable) 


City State/Province 
Country: [US 


Comments: (no HTML tags please) 









Your name 


Your email 









Is the above name/email also « contact person? @® Yes No 
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Naming Files and Links 


There are at least two good reasons for using plain English when naming files, 
titles in headers, linked text, and URLs. First, you and those you work with 
won’t need crib sheets to remember what’s in the files. Second and most impor- 
tant, people find your files through searchable indexes that catalog the names 
you choose. 


People think of words to search for the way they talk. They tend to try whole 
words first, like Rottweiler, Abyssinian, and amortization rather than rtwlr, absinin, 
and amort. Use common words whenever possible. 


Indexes also catalog the actual text used as the link. Use linked text that has 
meaning. Linking the words click this for more on heart attacks won’t do you 
much good in a search index. But linking the words heart attack will. 


A naming system helps you keep track of files and makes updates easier. Clever 
naming systems based on abbreviations and numbers mean nothing to people 
unfamiliar with your system. They are meaningless in an index and are unlikely 
to ever come up in a search. 


Some servers place constraints on the number of characters in a file name. Use 
short words and common abbreviations for file names on these servers. 


1 3 The http:// in front of an 
eas = URL indicates a Web site. 
http://MyNet.com/Dogs/Rottweiler.html 

A domain has a suffix that 
4 indicates what kind of 
2 organization runs the Web 
site. 


Use slashes to separate 
any directory names. 


J Put the HTML file name at 
the end. 
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Getting Your Files Noticed 





The title in the head of an 
HTML file appears at the top of 
the browser window. 


a Bora -81.HTML 















|cHTML> 
<HEAD> TITLE>Naming files, links and URLs</TITLE>}</HEAD> 
<BODY: 


<H1>Naming</H1> 
There are at least two ve reasons for using plain English when neming files, tiles in 
headers, linked text and URLs. First you and those you work with wont need crib 
sheets to remember what's in the files. Second, and most importantly, people find your 
ae through searchable indexes that catalog the nemes you choose. 
<! 
People think of words to search for the way they talk. They tend to try whole words 
first, like <B>Rottweiler, Abyssinian and amortization</B> rather than <B>rwlr, 
spear and amort</B>. Use common words when ever possible, 
<P> 
Indexes also catalog the actual text used as the link. Use linked text thethas 
meaning. Linking the words <A HREF="hearthtml">click this</A> for more on the 
heart attacks won't do you much good in a search index. But linking the words <A 
HREF="heart hunl">heart attack</A> will. 
A naming system helps you keep track of files and makes updates easier. Clever 
een arriens based on abbreviations and numbers meen nothing to people 

jar with your system. They are meaningless in an index and are unlikely to ever 
come up in 4 search. 
<P> 
‘Some servers place constraints on the number of characters in a file name. Use short 
words and common abbreviations for file names on these servers. 
</BODY> 
</HTML> 
















Naming a links aoe Qs ——————=-e 







a ea 


Location: aa ft iacintosh®20HD HTML /HTMLS20F iles S203 r'd%S20Edtion /1SSZOHTMLS2OF i 
Naming 







There are at least two good reasons for using plein English when naming files, titles in headers, 
lnked text and URLs. First you and those you work with wont need crib sheets to remember 
what's in the files. Second, and most importantly, people find your files through searchable indexes 
that catalog the names you choose. 








People think of words to search for the way they talk. They tend to try whole words first, like 
Rottweiler , Abyssinian and amortization rather then rtwir, absinin and amort. Use common 
words when ever possible. 







Indexes also catalog the actual text used as the link Use linked text that has meaning. Linking the 
words click this for more on the heart attacks won't do you much good in a search index. But linking 
the words heart attack will A naming system helps you keep track of files and makes updates 
easier. Clever naming systems based on abbreviations and numbers mean nothing to people 
unfemulier with your system. They ere meaningless in an index and are unlikely to ever come up in 
4 search. 












Some servers place constraints on the number of characters m a file name. Use short words and 
common abbrevistions for file names on these servers 





185 





Where To Find Software on the Web 


Much of the software used with the Web is freeware (free) and shareware (you 
can download and try it for a limited time before paying). You can find most of 
this software at popular anonymous FTP sites or via the Web. 


If you need Web browsers and HTML tools, here are some good places to look: 


Windows Software 








Description URL 

Mosaic and Viewers ftp://ftp.ncsa.uiuc.edu/Web/ 
Mosaic/Windows 

HTML ftp://ftp.ncsa.uiuc.edu/Web/html/ 
Windows 

Netscape ftp://ftp.netscape.com/pub/navigator 





W4 Server (Windows 3.1 and Win95) 


http://130.89.224.16:69 





Windows 3.1 httpd (Web Server) 


http://www.city.net/win-httpd/ 





Windows 95 httpd (Web Server) 


http://website.ora.com 





Freeware HTTP Server for Windows NT 


ftp://emwac.ed.ac.uk/pub/https/ 





Windows 95 software 


Macintosh Software 


Description 


Mosaic and Viewers 


http://www.windows95.com 
http://www.tucows.com 


URL 


ftp://ftp.ncsa.uiuc.edu/Web/Mosaic/Mac 











HTML ftp://ftp.ncsa.uiuc.edu/Web/html/Mac 

HTML ftp://ftp.hawaii.edu/mirrors/info- 
mac/TextProcessing/html 

Netscape ftp://ftp.netscape.com/pub/navigator 





MacHTTP (Web Server) 


http://www.biap.com/machttp/ 
machttp_software.html 





UNIX Software 


Description 


Mosaic and Viewers 


URL 


ftp://ftp.ncsa.uiuc.edu/Web/Mosaic/Unix 
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Description 


Getting Your Files Noticed 


URL 





Netscape 


ftp://ftp.netscape.com/pub/navigator 





HTML 





ftp://ftp.ncsa.uiuc.edu/Web/ 
html1/hotmetal/SPARC-Motif 





tkWWW (HTML and Web browser) 
NCSA httpd (Web Server) 


ftp://ftp.aud.alcatel.com/tcl/extensions/ 


http://hoohoo.ncsa.uiuc.edu/ 
docs/setup/Download.html 





CERN HTTP (Web Server) 


http://www.w3.org/hypertext/ 
WWW/Daemon/Status.html 


If you need other types of software not directly related to the Web, check one of 
these other FTP sites with good collections: 


Windows Software 


Description 


Internet Software 


URL 
ftp://ftp.cica.indiana.edu/pub/pc/ 





Microsoft 


Mac Software 


Description 


Internet Software 


More Internet Software 


ftp://ftp.microsoft.com 


URL 


ftp://ftp.hawaii.edu/mirrors/info- 
mac/Communication/MacTCP 


ftp://wuarchive.wustl.edu/systems/mac/ 
umich.edu 








UNIX Software 

Description URL 

UNIX Software ftp://ftp.uu.net/systems/unix 

UNIX Software ftp://sunsite.unc.edu/pub/packages 
UNIX Software ftp://wuarchive.wustl.edu/systems/unix 





Linux Software 


ftp://wuarchive.wustl.edu/ 
systems.linux/sunsite 
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Glossary 


Absolute path—Absolute paths spell out the location of a file by starting at the highest level and listing each 
directory needed to find the file itself. 


AIFF—A common sound file format on the Macintosh. 


Anchor—Text and graphics can link to places within the same document. These links require two parts: the 
anchor and the link. The anchor identifies the place to jump to. 


Annotate—To provide descriptive text for a possibly vague item. For example, placing comments in an 
HTML document annotates the code by providing descriptions of what the code accomplishes. 


Anonymous FTP—FTP transactions that do not require a unique login name or password. Use the name 
anonymous to log in and use your e-mail address as a password. 


Applets—Small programs that accomplish a specific purpose. Applets usually act as supplemental programs 
for larger applications. 


Argument—Words or numbers you enter as part of an HTML tag to expand or modify how that tag operates. 
ASCII—Acronym for American Standard Code for Information Interchange, a standard character set. 


Authoring software—Computer programs that aid in creating HTML documents by inserting the code for 
tags. 


BODY—HTML tag used to enclose the body (all the text and tags) of the HTML document. 


Browser—A program used to view HTML documents and navigate the World Wide Web. See Netscape, Mosaic, 
and Lynx. 


Byte—Light bits; the fundamental unit of personal computer data. 
CERN—European Particle Physics Laboratory, the developers of the World Wide Web. 


CGI—(Common Gateway Interface) The scripting language used to write gateway scripts for CERN and NCSA 
Web servers. 


Check boxes—Used in forms to make it possible to select one or more non-exclusive options in a list. 
Coordinates—Pairs of numbers used to define the edges of the clickable areas in image maps. 


Dedicated connection—Access to the Internet that is always available via a special connection such as 
FDDI, T1, or switched 56. See dial-up connections and ISDN. 


Default—The initial value of any input type (text field, check box, radio button, selection list) used in a form. 
Dial-up connections—Accessing the Internet by means of a modem and communication software. 
Directory—A major division on a hard drive or server used to divide and organize files. 


Domain—The name for a company, organization, or individual's Internet connection. Individual computers 
within this domain all end with the domain as part of their host name. 


Download—To transfer a file from another computer to your computer. 


E-mail (electronic mail)—A communication system that allows you to send an electronic “letter” to one or 
more recipients. 


Ethernet—A standard for local area network hardware, cabling, and transmission. 
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Appendixes 


External files—Any files that are not directly loadable by a browser such as some image formats, sounds, 
videos, or even program files. 


FDDI—A type of high-speed dedicated connection to the Internet with a speed of 45 M/sec. 
File formats—The patterns and standards used to store a program on a disk. Examples are GIF, JPEG, AIFF. 
Font—The name of a particular typeface. For example, Times Roman Bold is a font. 


Form—HTML documents designed with fill-in text boxes, lists of options, and other elements that allow 
the user of the form to send information back to the Web server. 


Freeware—Software that is distributed at no cost to the user. (The author maintains the copyright.) 
FTP (File Transfer Protocol)—The primary method for accessing files via the Internet. 
Gateway script—A program that is run on a Web server that processes the input from forms. 
GIF—A popular type of image file format. 


Gopher—A menu-based information system on the Internet popularized because of its ability to intercon- 
nect different Gopher sites on the same menu. 


Graphical browser—A program used to view formatted HTML documents and navigate the World Wide 
Web. Graphical browsers can display inline images and display text in various type styles. Examples are 
Mosaic and Netscape. 


Gutter—tThe space between textual columns. Occasionally, gutter is also used to define the space between 
a column and the edge of a page. 


Head—tThe HTML tag used to enclose the beginning elements in the HTML document, including the title. 


Home page—The first HTML document that you intend people to see at your Web site is known as a 
home page. 


Host name—The name of a computer on the Internet, used to identify it in the URL naming scheme. 


HTML (Hypertext Markup Language)—The coding scheme used to format text for use on the World 
Wide Web. 


HTTP (Hypertext Transport Protocol)—The transmission standard used to send HTML documents 
across the World Wide Web. 


Hypertext—An interlinked document structure that allows you to jump freely from one topic or docu- 
ment to another. 


Internet—The general term used to describe the worldwide network of computers and services encom- 
passing some 20-40 million computer users and dozens of information systems including e-mail, Gopher, 
FTP, and the World Wide Web. 


Internet access fees—Costs charged by Internet access providers to connect to the Internet. 


Internet access provider—A company that sells connections to the Internet to other companies and 
individuals. Also called Internet service provider. 


ISDN (Integrated Services Digital Network)—A high-speed dial-up connection to the Internet. 
Availability and cost are determined in part by local telephone companies. 


Java—A C-like programming language developed by Sun Microsystems to allow object oriented program- 
ming on Web pages. 


Linear document—A type of organization for HTML documents in which one HTML file follows the 
next. The HTML author determines the order in which the information is presented. 
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Link—The text or graphic used in an HTML document to jump from one document to another. 


LiveAudio—A Plug-In developed by Netscape to play various sound files in their browser. LiveAudio ships 
with Netscape and is installed when you install the browser. 


Load time—The amount of time it takes a user to retrieve a Web page and view it in a browser. 
LocalTalk—A local area network standard used by Macintosh computers. 

Lynx—A non-graphical browser for UNIX and DOS systems. See also Netscape and Mosaic. 
Macintosh—A brand of personal computers manufactured by Apple Computer. 

Menu—An on-screen display that lists available choices. 


Method—tThe manner in which an HTML form is submitted to the Web server. The most common method 
is post. 


MIDI—Musical Instrument Digital Interface. A standard that allows digital instruments to talk to and con- 
trol one another. On a computer, MIDI files can contain musical scores that can be reproduced on a sound 
card. 


Modem —A device that converts digital information from a computer to analog information that can be 
sent over telephone lines. This allows computers equipped with modems to communicate over telephone 
lines, 


Monospaced font—A typeface in which the width of each character is the same. 


Mosaic—One of the first graphical browsers. Developed by the NCSA, this browser fueled the growth of 
the Web. It is available in versions for Windows, Mac, and UNIX. 


MPEG (Motion Picture Experts Group)—A standard and file format for motion video on 
computers. 


Multimedia—Documents that combine text, graphics, sound, movies, or other media. 
Named entity—Special characters whose HTML code is an ampersand (&) followed by a name. 


NCSA (National Center for Supercomputing Applications)—The research group that developed 
Mosaic, a popular graphical browser. 


Netscape—A popular commercial graphical browser. It is available in versions for Windows, Mac, and 
UNIX. 


Network administrator—The person responsible for maintaining a network and assisting its users. 


Non-graphical browser—A program used to view HTML documents and navigate the World Wide Web. 


Non-graphical browsers do not display inline images and do not display formatted text. An example is 
Lynx. 


Non-linear document—A type of organization for HTML documents in which one HTML file contains 
links to more than one other HTML file. The person browsing the files determines the order in which the 
information is presented. 


Numbered entity—Special characters whose HTML code is an ampersand (&) followed by a number. 


Operating system—A master control program for a computer. Examples are DOS, UNIX, and the MacOS. 
(Technically speaking, Microsoft Windows 3.x is an operating environment as it still requires the separate 
DOS operating system to run. Microsoft’s Windows 95 is a true operating system as DOS is built into it.) 


Paired Tags—Two tags that must be used in conjunction with each other, usually to surround elements 


on which they operate. For example, <FONT> and </FONT> are paired font tags. Also referred to as con- 
tainer tags. 
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Parameters—A set of values passed to an external program to control its operation. 


Path name—The place where a file is stored on a computer, indicated by the drive or volume name and 
the subdirectories needed to find the file. See relative path and absolute path. 


Photoshop—A high-end graphics editing program by Adobe, more common on Macintosh computers. 
Pixels—The smallest measure of the image on a computer screen. Each individual dot of light is a pixel. 
Platform—A computer hardware standard, such as IBM PC compatible or Macintosh. 


Plug-ins—Small programs that can be installed to extend a browser's capabilities. Plug-ins are usually 
developed by third parties so HTML browsers can display their proprietary data files. For example, the 
ShockWave Plug-in was developed by Macromedia so that Netscape could display Macromedia Director 
animation files. 


Polygon—A closed shape of three or more sides—triangles, rectangles, octagons, and so on. 
Post—To place an HTML file on a Web server to make it available for browsing. 


Preference setting—Program options in browsers that allow the user to determine such things as which 
fonts are used for various HTML styles, whether or not inline images are displayed, what other applications 
are used to view movies, and so on. 


Proportional font—A typeface in which the width of each character varies depending on the character's 
shape. An J takes up less space than a w for example. 


Public domain software—Software that is made freely available by the developer and which the devel- 
oper gives up all copyright ownership to. 


QuarkXPress—A high-end page layout program used on the Macintosh. 
Quicktime—A standard video image format, popular on the Macintosh, but also available on the PC. 
Radio button—Used in forms to make it possible to select one exclusive option in a list. 


RAM (random access memory)—The computer's primary working memory in which program instruc- 
tions and data are stored. 


Relative path—Relative paths spell out the location of a file based on the current document location. 


Rollover—A term used to define when the mouse pointer is moved to point at a given object on the 
screen. Generally, this refers to an event that happens when the mouse pointer is placed on a specific 
object. 


Router—A device connecting a LAN to the Internet that routes transmissions between the two. 


Sans Serif—A type of font that lacks decorative scrollwork on its letters. This font is Serif (has decorative 
scrollwork), while this font is Sans Serif (no scrollwork). 


Scripts—A set of instructions that tell someone or something what to do. In HTML, scripts are small pro- 
grams that can be placed on a Web page to add interactivity and to help control the page. JavaScript is one 
such “scripting” language. 


Scroll—To move a large image around on the screen in order to view it. 


Searchable index—Indexes of World Wide Web documents that you can submit a query to and the 
index searches to find pages matching your specification. 


Serif— A type of font that has decorative scrollwork on its letters. This font is Serif (has decorative scroll- 
work), while this font is Sans Serif (no scrollwork). 


Server—See Web server. 
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Shareware—Software that you can obtain for free (often by downloading from the Internet) on a trial 
basis but that may require some payment or registration for continued used. 


Sound board—Hardware used to play sound files on computers. 

Submit—To send a completed form to a Web server. 

T1—A high-speed dedicated connection to the Internet that provides data transmission rates of 1.5 M/sec. 
Tag—The HTML codes used to specify text styles, links, graphics, and other HTML elements. 


Target—The area on the screen where specific text is directed. This term is used mostly with frames when 
a specific document is meant to be displayed in a specific frame. 


Text fields—Form elements that allow users to insert a single line of text. 
TITLE—The HTML tag used to give each HTML document a title. 


Transmission line—The physical connection from your computer to the Internet such as a telephone 
line or a T1. 


Transparent graphics—Graphic images that have a clear background, which makes the graphic appear 
to float in the browser screen. 


Typeface—tThe distinctive design of the letter of a specific type style. The typeface is also uniquely deter- 
mined by its size, style, weight, and posture. 


UNIX—An operating system used on a variety of computers from personal computers to mainframe. Many 
computers and servers connected to the Internet use UNIX. 


URL (Uniform Resource Locator)— The standard used to identify files on the Internet and World 


Wide Web using the type of server, the host name of the computer the file is on, and the complete path to 
the file. 


Video board—Hardware used to play movie files on computers. 


Visual Basic—A programming language by Microsoft modeled after the BASIC programming language. 
Visual Basic is popular because of its easy-to-use, graphical, drag-and-drop programming interface. (Hence 
the name Visual.) 


WAV—A popular sound file format used primarily by Windows-based computers. 


Web server—The hardware and software used to store and deliver HTML documents for use on the World 
Wide Web. 


Web site—A person or company’s collection of HTML documents on a Web server. A single Web server 
may contain one or more Web sites. 


Windows—An operating environment for the IBM PC-compatible platform that allows several 
programs to run at once and utilizes icons and menus for program control. 


Word processor—A program used to create and edit text documents. When using a word processor to 


create HTML documents, save the documents as ASCII text rather than in the word processor's proprietary 
format. 


World Wide Web (WWW) —An Internet service that links multimedia documents together using hyper- 
text. Users can jump between documents using links to view text, graphics, movies, and other media. 
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ASCII Codes 





Decimal Name Character Decimal Name Character 
0 blank 31 down triangle v 
1 happy face © 32 space Space 
Z inverse happy e 33 exclamation ! 
face point 
3 heart v 34 quotation mark . 
4 diamond + 35 number sign # 
5 club * 36 dollar sign $ 
6 spade 4 37, percent sign % 
iu bullet . 38 ampersand & 
8 inverse bullet o 39 apostrophe s 
9 circle o 40 opening ( 
10 inverse circle 5 parenthesis 
11 male sign o 41 ee j ) 
12 female sign 2 DADEHEA 
3 42 asterisk * 
1 single note a “a shicee 
14 double note 4 ae ene . 
15 sun * ae oa i 
| ; . yphen or - 
16 right eae > minus sign 
17 left triangle <i 46 period ' 
18 up/down arrow t 47 ash / 
ig double I 48 par 0 
exclamation 49 1 
one 
20 paragraph sign I 
: 5 50 two 2, 
21 section sign § 51 H 3 
r 
22 rectangular bullet a a 
; 52 four 4 
23 up/down to line + : 
53 five 5 
24 up arrow tT il ; 2 
25 down arrow L nar 
: 55 seven 7 
26 right arrow = 56 we ‘ 
27 left arrow = 59 as 9 
28 lower left box L 58 aed 
29 left/right arrow mee 
i 59 semicolon : 
30 up triangle a ; 
60 less-than sign ce 
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Decimal Name Character Decimal Name Character 


61 equal sign = 97 lowercase A a 
62 greater-than sign > 98 lowercase B b 
63 question mark ? 99 lowercase C c 
64 at sign @ 100 lowercase D d 
65 capital A A 101 lowercase E e 
66 capital B B 102 lowercase F f 

67 capital C G 103 lowercase G g 
68 capital D D 104 lowercase H h 
69 capital E E 10S lowercase I i 

70 capital F F 106 lowercase J j 

71 capital G G 107 lowercase K k 
72 capital H H 108 lowercase L 1 

73 capital I I 109 lowercase M m 
74 capital J J 110 lowercase N n 
75 capital K K 111 lowercase O oO 
76 capital L L 112 lowercase P p 
Lh capital M M 113 lowercase Q q 
78 capital N N 114 lowercase R r 

79 capital O O 115 lowercase S s 

80 capital P E 116 lowercase T t 

81 capital Q Q bi? lowercase U u 
82 capital R R 118 lowercase V Vv 
83 capital S S 119 lowercase W Ww 
84 capital T a 120 lowercase X x 
85 capital U U 121 lowercase Y y 
86 capital V V 122, lowercase Z Zz 

87 capital W W 123 opening brace { 

88 capital X X 124 vertical line | 

89 capital Y y 125 closing brace } 

90 capital Z Zs 126 tilde 3 

91 opening bracket [ 127 small house & 
92 backward slash \ 128 C cedilla G 
93 closing bracket ] 129 u umlaut u 

94 caret i‘ 130 e acute é 

95 underscore x 131 a circumflex a 

96 grave 


(continues) 
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Decimal 


132 
133 
134 
135 
136 
137 
138 
139 
140 
141 
142 
143 
144 
145 
146 
147 
148 
149 
150 
151 
152 
153 
154 
155 
156 
157 
158 
159 
160 
161 
162 
163 
164 
165 
166 
167 


a umlaut 

a grave 

a ring 

c cedilla 

e circumflex 
e umlaut 

e grave 

I umlaut 

I circumflex 
I grave 

A umlaut 

A ring 

E acute 

ae ligature 
AE ligature 
o circumflex 
o umlaut 

o grave 

u circumflex 
u grave 

y umlaut 

O umlaut 

U umlaut 
cent sign 
pound sign 
yen sign 

Pt 

function 

a acute 

I acute 

o acute 

u acute 

n tilde 

N tilde 

a macron 

o macron 


Character 


orm ARO Oma DK HH GOS & oO O O BR BR ch be De me wm Oo Om Om Be pw BD: 





Decimal 
168 


169 
170 
171 
172 
173 


174 
17S 
176 
177 
178 
179 
180 


181 
182 


183 
184 
185 


186 
187 
188 
189 
190 
191 
192 
193 


194 


195 
196 
197 
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Name Character 


opening 

question mark 
upper left box 
upper right box 
1/2 

1/4 

opening 
exclamation 
opening guillemets 
closing guillemets 
light block 
medium block 
dark block 

single vertical 
single right 
junction 


2 to 1 right 
junction 


1 to 2 right 
junction 


1 to 2 upper right 
2 to 1 upper right 


double right 
junction 


double vertical 
double upper right 
double lower right 
1 to 2 lower right 
2 to 1 lower right 
single upper right 
single lower left 


single lower 
junction 


single upper 
junction 

single left junction 
single horizontal 
single intersection 


é 


adits 





i =) 


bh & 
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Decimal 


198 
199 
200 
201 
202 


203 


204 
205 
206 
207 


208 
209 
210 


211 
212 
213 
214 
215 
216 
217 
218 
219 
220 
221 
222 
223 
224 
225 
226 
227 
228 
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2 to 1 left junction 
1 to 2 left junction 
double lower left 
double upper left 


double lower 
junction 


double upper 
junction 


double left junction 
double horizontal 
double intersection 


1 to 2 lower 
junction 


2 to 1 lower 
junction 


1 to 2 upper 
junction 


2 to 1 upper 
junction 


1 to 2 lower left 

2 to 1 lower left 

2 to 1 upper left 

1 to 2 upper left 

2 to 1 intersection 
1 to 2 intersection 
single lower right 
single upper right 
inverse space 
lower inverse 

left inverse 

right inverse 
upper inverse 
alpha 

beta 

Gamma 

pi 

Sigma 


Character 


F 
lt 


[=a te 


or 


& 4F a 


MaONOP Rk hae “EE 


Decimal Name Character 
229 sigma o 
230 mu vy 
231 tau Tt 
232 Phi ®D 
233 theta 8 
234 Omega Q 
235 delta 6 
236 infinity oo 
237 phi 5 
238 epsilon € 
239 intersection of sets 9 
240 is identical to = 
241 plus/minus sign + 
242 greater/equal sign 2 
243 less/equal sign < 
244 top half integral f 
245 lower half integral J 
246 divide-by sign + 
247 approximately = 
248 degree 5 
249 filled-in degree 

250 small bullet 

251 square root v 
252 superscript n B 
253 superscript 2 2 
254 box . 
255 phantom space 
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Tag Name Code Page 
Document Structure 
Body <BODY> 20 
Frame Definition <FRAME> 68 
Frame Setup <FRAMESET> 69 
Head <HEAD> 20 
HTML <HTML> 20 
Multiple Columns <MULTICOL> 4la 
No Frame Alternative <NOFRAME> 68 
Titles and Headings 
Heading - First Level <H1> 20 
Heading - Second Level <H2> 20 
Heading - Third Level <H3> 20 
Heading - Fourth Level <H4> 20 
Heading - Fifth Level <H5> 20 
Heading - Sixth Level <H6> 20 
Title <Title> 20 
Paragraphs and Lines 
Break <BR> 30 
Horizontal Rule <HR> 54 
Paragraph <P> 30 
Styles <STYLE> 17 
Table <TABLE> 58 
Links 
Anchor <A NAME=“name’> 48 
Link <A> 34 
Link to an anchor <A NAME=“anchor name”> 48 
Link to another document <A HREF=“filename’> 48 
Linked graphic <A HREF=“link filename’> 38 
<IMG SRC=“graphic filename’> 38 
Linked text <A HREF=“link filename”>text to click</A> 34 
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Tag Name Code 
Character Formats 

Address <ADDRESS> 
Blockquote <BLOCKQUOTE> 
Bold <B> 

Code Sample <CODE> 
Emphasis <EM> 

Font Type/Color/Size <FONT> 
Italic <I> 
Keyboard <KBD> 
Preformatted Type <PRE> 
Strong <STRONG> 
Subscript <SUB> 
Superscript <SUP> 
Typewriter <TT> 
Underscore <U> 
Graphics 

Alternate to Image <ALT> 


“Browser Image Map Shapes” 


Image Alignment 


Image map 
Images 
Spacer 


Video Images 


Lists 


Definition Lists 
Glossary List Definitions 
Glossary Lists 

Glossary List Terms 

List Item 

Ordered List 

Unordered List 
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<AREA SHAPE="|[rect,circle,polygon]” COORDS= 
“list of coordinates” HREF=“filename”> 


<IMG ALIGN=/top, middle, bottom] 
SRC=“filename’> 


<IMG SRC=“image filename” ISMAP> 
<IMG SRC=“filename” 

<SPACER> 

<IMG DYNSRC=“filename”> 


See Glossary Lists 
<DD> 

<DL> 

<DT> 

<LI> 

<OL> 

<UL> 


Page 


22 
$2 
28 
22 
22 
15 
28 
22 
72 
22 
12 
12 
28 
28 


46 


45 
58 


76 
56 
20 
43 


68 
68 
68 
68 
66 
66 
66 
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Tag Name Code Page 
Forms 
Check box <input type="checkbox” name=“name” 92 
value=“value” [checked}> 
Form <FORM> 84 
Image Buttons <INPUT TYPE=“IMAGE” SRC=“filename” 
NAME=“name” VALUE=“value”> 57 
Pop-up list name <select name=“name"> 94 
Pop-up list option <option> 94 
Pop-up list selected option <option selected> 94 
Radio button <input type=“radio” name="name” 90 
value="“value”[checked]> 
Reset button <input type=reset value=“Clear’> 84 
Selection List See Pop-up List name 94 
Submit button <input type=submit value=“Submit’> 84 
Text Field <input type="text” size=“xx" 86 
name=“name” maxlength="yy” 
value="default "> 
Objects, Scripts, and Applications 
Embedded Object <EMBED> 48 
No Embed Alternative <NOEMBED> 48 
Script/Applet <APPLET CODE=“filename” 
WIDTH=“width” HEIGHT=“height”> 47 
Script/Applet Parameters <PARAM> 47 
Script Language <SCRIPT LANGUAGE=“language”> 46 
Other Tags 
Background Sound <BGSOUND> 37. 
Comment <!-comment-> 122 
Marquee <MARQUEE> 18 
Special Characters &character code; 70 
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Color Names 


Netscape and Internet Explorer both support the sixteen named colors shown in 
the table below. You can use the names of the colors instead of their RGB values 
in hexadecimal notation (for example, “#cOcOcO”) in any tag that supports a 
color value. For example, the two tags: 


<BODY BGCOLOR=“#800080”> 
and 

< BODY BGCOLOR=“Purple”> 

are identical. 


Ease of identification in your HTML code is the main advantage of using color 
names instead of their corresponding values. For example, it is much easier to 
tell which color is specified when you see “Teal” as opposed to “#008080.” 


You may still want to use hexadecimal notation to define colors if the named 
color is not quite right. Each red, green, and blue component color has 256 val- 
ues from 0, the darkest, to 255, the lightest. These must be expressed as hexa- 
decimal doublets. Hexadecimal means base 16. Instead of counting0123456 
7891011 12 13 14 15, as we do in base ten, you count0123456789abc 
de f. That means f in hexadecimal notation = 15 in base ten. 11 in hexadecimal 
notation = 17 in base ten, that is to say, one 16 + one 1 = 17. 


Color Name RGB Value 
Black #000000 
Navy #000080 
Silver #COCOCO 
Blue #0000FF 
Maroon #800000 
Purple #800080 
Red #FFOOOO 
Fuchsia #FFOOFF 
Green #008000 
Teal #008080 
Lime #00FFOO 
Aqua #OOFFFF 





————————_—_____________ Apnentixes 


Color Name 


RGB Value 
Olive #808000 


Gray 
Yellow 
White 


#808080 
#FFFFOO 
#FFFFFF 
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Index 


Symbols 


& (ampersand) 80-81 
* (asterick), 138-139 
! (exclamation point), 
160-161 


A 


A HREF= tags, 43, 46-47 
ABOVE, 130-131 
absolute paths 
definition, 188 
features, 58-59 
access fees, Internet, 189 
access providers 
Internet, 6 
definition, 189 
adding 
borders, graphics, 50-51 
breaks, 36-37 
lines, 36-37 
paragraphs, 36-37 
sounds 
backgrounds, 74 
procedures, 86-87 
space, Netscape, 38-39 
video, procedures, 86-87 
address tags, 22-23 
addresses 
URLs, 6 
formats, 52 
administrators, 
networks, 190 
aids, navigating 
documents, 154-155 
AIFF, 74, 86, 188 
Align arguments, features, 
124-125 
aligning 
graphics, 24-25, 124-125 
horizontal, 24-25 
options, 66 
text, 24-25, 124-125 
ALL 130-131 
ALT tags, 54-55 
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ALTERNATE, 34-35 
ampersand, special 
characters, 80-81 
anchors 
definition, 188 
features, 56 
animations, 96 
anonymous FTP 
definition, 188 
servers, connecting, 52 
APPLET tags, 96-97 
applets 
animations calculator 
entering, 96-97 
features, 96 
games stock ticker 
arguments 
Align, 124-125 
AUTOSTART=, 98 
BGCOLORe=, 132-133 
border, 128 
COLOR, 28-29 
COLS, 142-143 
Colspan, 120-121 
definition, 188 
DYNSRC=, 88-89 
LOOP=, 98 
MULTICOL tags, 84-85 
Nowrap, 126-127 
ROWS, 142-143 
Rowspan, 120-121 
selected, 114-115 
STYLE=, 32 
ASCII (American Standard 
Code for Information 
Interchange), 188 
asterick (*), 138-139 
AU, 74 
authoring software, 188 
automated indexes, search 
tools, 13 
AUTOPLAY= 74-75 
AUTOSTART= 98-99 
availibility, software, 
www, 12 


backgrounds 
colors 
setting, 44-45 
tables, 132-133 
graphics, creating, 72-73 
sounds, adding, 74 
balancing connections, 
speed, 18-19 
basefonts, sizes, changing, 
26-27 
BEHAVIOR= 34-35 
BELOW, 130-131 
BGProperties= 72-73 
BGCOLOR= arguments, 
132-133 
BGSOUND tags, 74-75, 98 
blink styles, 30-31 
BLOCK, 38-39 
blockquotes, tags, 60-61 
BODY tags, 188 
BORDER, 128-133, 139 
Border arguments, 128 
BORDERCOLOR= 132-133, 
139 , 
BORDERCOLORDARK= 
132-133, 
BORDERCOLRLIGHT= 
132-133 
borders 
graphics, adding, 50-51 
tables, changing, 128-129 
BOX, 130-131 
BR Clear tags, 40-41 
BR tags, 36-37 
browsers 
definition, 188 
display preferences, 
formatting, 8 
downloading, FTP 
sites, 11 
e-mail, sending, 52 
features, 8 
fonts, formatting, 8 
frames, displaying, 
136-137 


FTP 
anonymous, 52-53 
sites, 11 
graphical, definition, 189 
graphics 
displaying, 50-51 
inserting, 64-65 
helper applications, 
functions, 8 
HTML tags, 8 
links, paths, 9 
Lynx, definition, 190 
Mosaic 
definition, 190 
development, 4 
Netscape Navigator, 4, 11, 
94-95, 190 
non-graphical 
definition, 190 
disadvantages, 54 
features, 10 
requirements 
hardware, 17 
software, 17 
sounds, adding, 86-87 
text, aligning, 24-25 
use maps, supporting, 
92-93 
video, adding, 86-87 
windows, dividing, 
142-143 
bullets, selecting, 76-77 
buttons, submit, 
graphics, 116 
bytes, definition, 188 


C 


calculator, 96 
capabilities, HTML, 
hypertext, 4 
caveats, credit card 
transactions, 12 
cellpadding, 128 
cells 
grouping, 134-135 
spanning, rows and 
columns, 120-121 
tables, 118-119 





cellspacing, 128 
center aligning, text, 25 
CERN, definition, 188 
CGI 
definition, 188 
scripts, 90 
see also gateway scripts 
changing 
borders, tables, 128-129 
colors, tables, 132-133 
padding, tables, 128-129 
sizes, text, 26-27 
spacing, tables, 128-129 
check boxes 
definition, 188 
features, 112 
checking documents, 
WWW, 178-179 
citation tags, 22-23 
Clear=all options, BR tags, 
40-41 
Clear=left options, BR tags, 
40-41 
Clear=right options, 
BR tags, 40-41 
Clearing text wrap, 40-41 
click coordinates, 90,116 
clicking, links, 
hypertext, 8 
CODE= 22-23, 96-97 
COLORGROUP tags, 
134-135 
COLOR= arguments, 28-29 
color names, 200 
colors 
backgrounds, 44-45 
links, 44-45 
specifying, 28-29 
tables, 132-133 
text, 44-45 
COLS arguments, 142-143 
Colspan arguments, 
120-121 
COLUMN tag, 134-135 
columns 
cells 
grouping, 134-135 
spanning, 120-121 
text, multiple, 84-85 


comments, inserting, 
160-161 
commercial servers, 
174-175 
complete URLs, 58-59 
complexities, forms, 
gateway scripts, 102-103 
computers, downloading, 
definition, 188 
connecting, servers, 
anonymous FTP, 52 
connections 
browser, 16-17 
dedicated, 188 
dial-up, 18-19, 188 
domains, 188 
FDDI, 189 
Internet 
dedicated, 18-19 
dial-up, 18-19 
speed, balancing, 18-19 
consistencies, files, 
formatting, 162 
CONSOLE, 98-99 
controlling 
alignment, graphics, and 
text, 124-125 
gridlines, 130-131 
width, tables, 122-123 
CONTROLS, 88, 98 
converting graphics, 
transparent, 70-71 
coordinates 
definition, 188 
files, image maps, 90 
copyrights, WWW, 12 
costs 
Internet, access fees, 189 
programmers, 176 
servers, 176 
creating 
columns, multiple, 84-85 
graphics, backgrounds, 
72-73 
image maps, 90-91 
servers, 170-171 
tags, MAP, 92-93 
text 
links, 43 
non-wrapping, 126-127 
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credit card transactions, 
caveats, 12 


cross-platform file formats 


sound, 86-87 
video, 86-87 
custom text, formatting, 
82-83 


dedicated connections 
definition, 188 
Internet, 18-19 
defaults, definition, 188 
defining frames, 138-140 
designers, costs, 176 
designing 
graphics, electronic 
publishing, 156-157 
servers, 172-173 
development browsers, 
Mosaic, 4 
diagrams, non-linear 
documents, 150-151 
dial-up connections 
definitions, 188 
Internet, 18-19 
dial-up modems, 6 
dimensions, graphics 
height, 48-49 
width, 48-49 
DIRECTION= 34-35 
directories 
changing, 188 
features, 180-181 
display preferences, text, 
formatting, 8 
displaying 
documents, frames, 
136-137 
graphics, borders, 50-51 
links, navigation 
bars, 144 
dividing 
frames, 142-143 
windows, browsers, 
142-143 
documentation 
HTML, 2 
Que, other titles, 3 
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documents 
anchors, 56 
cells, tables, 118-119 
forms 
definition, 100 
parts, 104 
frames, displaying, 
136-137 
HTML, parts, 20-21 
hypertext, 189 
information, 
presenting, 158 
linear, 189 
links 
definition, 190 
within, 56 
multi-page 
linear, 148-149 
non-linear, 150-151 
naming, 184-185 
navigating aids, 154-155 
non-linear, 190 
posting, 166-167 
scripts, 94 
sections, rules, 62-63 
sounds, adding, 86-87 
tables, parts, 118-119 
testing, 164 
titles, 184-185 
video, adding, 86-87 
WWW 
checking, 178-179 
updating, 178-179 
domains 
definition, 188 
public domain 
software, 191 
DOS Lynx I 
downloading 
browsers, FTP sites, 11 
definition, 188 
dummy tests, 164 
DYNSRC= arguments, 
inserting, 88-89 


E 


E-mail 
definition, 188 
sending, browsers, 52 


electronic publishing, 
graphics, designing, 
156-157 
EMBED tags, 98-99 
embedded applications 
helper, 98 
plug-ins, 98 
Emphasis tags, 22-23 
entering 
applets 
parameters, 96 
procedures, 96-97 
type, preformatted, 82-83 
Ethernet, definition, 188 
expense, increasing, 
options, 18-19 
extensions 
sounds, browsers, 86-87 
video 
browsers, 86-87 
DYNSRC=, 88-89 
IMG tags, 88-89 
external 
applications, applets, 96 
files 
definition, 188 
testing, 164 
safeguards, 96 


F 


FACE= 28-29 
FDDI, definition, 189 
ffffff, 28-29, 44-45, 132-133 
files 
comments, inserting, 
160-161 
coordinates, image 
maps, 90 
external, definition, 188 
formats 
definition, 189 
GIF, 189 
MPEG, 190 
WAY, 192 
formatting, 
consistencies, 162 
GIF, opaque, 70-71 
HTML, navigating, 
152-153 





listing, searchable 
indexes, 182-183 
reference, locating, 59 
source, frames, 138-140 
testing, 164 
titles, 9 
financial transactions, 12 
finding 
servers, Internet, 168-169 
software, free, 186-187 
Web sites, search engines, 
180-181 
Fixed tags, 30-31 
FONT tags, 26-29 
fonts 
monospace, 190 
proportiional, 191 
sizes, changing, 26-27 
specifying, problems, 
28-29 
text, formatting, 8 
FONT-SIZE, 26-27 
FORM tag, 104 
formats 
addresses, URLs, 52 
cross-platform file 
sound, 86-87 
video, 86-87 
files 
definition, 189 
GIF, 189 
MPEG, 190 
WAY, 192 
formatting 
files, consistencies, 162 
text 
custom, 82-83 
display preferences, 8 
fonts, 8 
forms 
defining, 189 
features, 100 
gateway scripts, 
complexities, 102-103 
parts, 104 
placing, 104 
pop-up menus, 114-115 
scrolling lists, 114-115 
selection lists, 114-115 





submit buttons, 
graphics, 116 
text fields, 192 
frame attributes, 136 
frame capable browser, 
136, 138 
FRAME tags, 136-145 
frames 
displaying, procedures, 
136-137 
dividing, 142-143 
layout, defining, 138-140 
source files, defining, 
138-140 
targeting, links, 144 
FRAMESET tags, 138-145 
freelance programmers, 
costs, 176 
freeware 
definition, 189 
finding, 186-187 
FIP 
anonymous 
connecting, 52-53 
definition, 188 
browsers, 
downloading, 11 
definition, 189 
sites, browsers, 11 


G 


games, 96 
gateway scripts 
CGI, 188 
definition, 7, 189 
forms, complexities, 
102-103 
image maps, 90 
GIF 
definition, 189 
files, opaque, 70-71 
glossary, lists 
features, 78-79 
identifying, 78-79 
gophers, 189 
government software, 
public domain, 12 
graphical browsers, 
definition, 189 


graphic send buttons, 
116-117 
graphics 
aligning 
controlling, 124-125 
options, 66 
procedures, 24-25 
anchors, 188 
background, creating, 
72-73 
borders, adding, 50-51 
designing electronic 
publishing, 156-157 
displaying, browsers, 
50-51 
forms, submit 
buttons, 116 
height, dimensions, 
48-49 
in-line, spacing, 68-69 
inserting, browsers, 64-65 
links 
definition, 190 
features, 46-47 
loading 
LowSRC, 48-49 
problems, 48-49 
nesting, 68-69 
tules, inserting, 62-63 
transparent 
converting, 70-71 
definition, 192 
width, dimensions, 48-49 
gridlines, controlling, 
130-131 
grouping cells, columns, 
134-135 
GUTTER= 84-85 


H 


hardware 

requirements 
browsers, 17 
learning, 14-15 
options, 16-17 
sournd, 16 
video, 16 

video boards, 192 





HEADtags, 189 
height, dimensions, 
graphics, 48-49 
helper applications 
browsers, 8 
features, 98 
hidden, 104-105 
home pages 
definition, 189 
features, 146-147 
naming, 184-185 
search tools, indexes, 13 
HORIZONTAL, 38-39 
horizontal alignment, 
24-25 
horizontal lines, 130 
host names, 189 
HR tags, rules, inserting, 
62-63 
H SIDES, 130-131 
HTML (HyperText Markup 
Language) 
capabilities, hypertext, 4 
definition, 189 
documentation, 
overview, 2 
documents, parts, 20-21 
files 
graphics, 9 
navigating, 152-153 
sound, 9 
learning process, 14-15 
tags, 205 
ALT, 54 
defined, 4 
definition, 20-21, 192 
fixed, 30-31 
formatting, 8 
HEAD, 189 
IMG, 54 
procedures, 20-21 
TITLE, 192 
HTTP, definition, 189 
hypertext 
capabilities, 4 
definition, 189 
links 
browsers, 9 
clicking, 8 
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creating, 43 

naming, 184-185 

non-linear structures, 
150-151 


I-J-K 
identifying, lists, glossary, 
78-79 
image maps 
coordinates, 188 
creating, 90-91 
features, 90 
use maps, differences, 
92-93 
images, see graphics 
IMG Align tags, 40-41 
IMG tags 
graphics, inserting, 64-65 
non-graphical 
browsers, 54 
video, inserting, 88-89 
in-line graphics, spacing, 
68-69 
indexes 
automated 
definition, 
search tools, 13 
searchable 
definition, 191 
listing, 182-183 
WWW, 181 
information, presenting, 
documents, 158 
INPUT TYPE= “IMAGE”, 
116-117 
INPUT TYPE= “HIDDEN”, 
104-105 
input type tag, 104 
inserting 
comments, files, 160-161 
graphics, browsers, 64-65 
rules 
graphics, 62 
procedures, 62-63 
sounds 
Netscape, 98 
procedures, 86-87 
special characters, 80-81 


video 
DYNSRC= arguments, 
88-89 
IMG tags, 88-89 
procedures, 86-87 
Internet 
access fees, 189 
access providers, 189 
connections 
dedicated, 18-19 
dial-up, 18-19 
domains, 188 
definition, 7, 189 
Gophers, definition, 189 
T1, definition, 192 
Internet Explorer 
(Microsoft) 
cells, grouping, 134-135 
extensions, video, 88-89 
FTP Site, 11 
marquees, 34 
plug-ins, 98 
scripts, 94-95 
styles, type, 32 
Internet servers 
commercial, 174-175 
costs, 176 
creating, 170-171 
designing, 172-173 
documents, posting, 
166-167 
finding, 168-169 
Internet servers 
ISDN, definition, 189 


Java, 8, 96 
Java enhanced browser, 96 


keyboard tags, 22-23 


L 


LANGUAGE= 94-95 
languages, 4, 94-95 
layout, frames 

defining, 138-140 

dividing, 142-143 
learning 

hardware, requirements, 

14-15 


a 


HTML, process, 14-15 
software, requirements, 
14-15 
left aligning, text, 25 
legal issues, copyrights, 12 
LHS, 130-131 
limiting, transmission 
speed, 18-19 
line breaks, adding, 36-37 
linear documents 
definition, 189 
structure, 148-149 
lines, transmission, 192 
links 
colors, setting, 44-45 
definition, 190 
displaying, navigation 
bars, 144 
documents, 56 
frames, targeting, 144 
graphics, features, 46-47 
hypertext 
clicking, 8 
naming, 184-185 
non-linear structures, 
150-151 
paths, browsers, 9 
text, creating, 43 
listing files, searchable 
indexes, 182-183 
lists 
bullets, selecting, 76-77 
glossary 
features, 78-79 
identifying, 78-79 
ordered, 76-77 
selecting 
check boxes, 112 
radio buttons, 110 
unordered, 76-77 
see also scrolling lists 
LiveAudio, 74 
load times 
definition, 190 
testing, 164 
loading graphics 
LowSRC, 48-49 
problems, 48-49 
localtalk, 190 


locating 
files, 9 
reference files, URLs, 59 
LOOP= arguments, 88-89, 
98 
LowSRC graphics, 48-49 
Lynx, definition, 11, 190 
FTP Site, 11 


Macintosh, definition, 190 
mail-order companies, 12 
MAP tags, creating, 92-93 
Maps, see image maps 
MARGINHEIGHT= 139 
MARGINWIDTH= 139 
MARQUEE tags, 34-35 
marquee 
options, 34 
tags, features, 34 
menus 
definition, 190 
methods, definition, 190 
Microsoft Internet Explorer 
see Internet Explorer 
MIDI, 74 
modems 
definition, 190 
dial-up 
features, 6 
connections, 18-19 
modifying colors, tables, 
132-133 
monospace fonts, 190 
Mosaic 
definition, 190 
development, 4 
FTP Site, 11 
MPEG, definition, 190 
multi-page documents 
linear, 148-149 
non-linear, 150-151 
MULTICOL tags, 84-85 
multimedia, 
definition, 190 
multiple columns, text, 
creating, 84-85 


NAME= 96-97 
named entities, 
definition, 190 
naming 
documents, 184-185 
links, hypertext, 184-185 
paths, 191 
navigating 
documents, aids, 154-155 
files, HTML, 152-153 
testing, 164 
navigation bar, 116-117 
navigation bars, links, 
displaying, 144 
Navigator, see Netscape 
NCSA, definition, 190 
nesting graphics, 68-69 
Netscape 
definition, 190 
plug-ins, 98 
space, adding, 39 
network 
administrators, 190 
NOEMBED tags, 98-99 
NOFRAME tags, 138, 
140-141 
none, 130-131 
non-frame capable 
browsers, 136, 138 
non-graphical browsers 
as alterative, 54-55 
definition, 190 
features, 10 
non-linear documents 
definition, 190 
multi-page, 150-151 
non-wrapping text, 
creating, 126-127 
NORESIZE, 139 
Noteworthy Music 
homepage, 12 
nowrap arguments, 
126-127 
numbered entities, 190 
numbers, inserting, 80-81 
numeric equivalents 28, 
200 (colors) 
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0 


onload, 94-95 

opaque files, GIF, 70-71 

operating systems 
definition, 190 
UNIX, definition, 192 

options 
graphics, aligning, 66 
marquee, 34 
requirements, hardware, 

16-17 
ordered lists, features, 
76-77 


P-Q 
P tags, 36-37 
padding, tables, changing, 
128-129 
pages 
posting, 166-167 
testing, 164 
Paired tag, 4 
paragraph breaks, adding, 
36-37 
PARAM tags, 96-97 
parameters 
entering, applets, 96 
search enginges, 180-181 
text fields, 106 
parts 
forms, 104 
tables, 118-119 
passwords, pages, 
testing, 164 
paths 
absolute 
definition, 188 
features, 58-59 
names, 191 
relative 
definition, 191 
features, 58-59 
placing 
forms, documents, 104 
tags 
head, 20 
title, 20 


platforms, definition, 191 

plug-ins, features, 98 

pop-up menus, forms, 
114-115 

posting documents, 
166-167 

posts, definition, 191 

PRE tags, 82-83 

preferences, setting, 191 

preformatted type, 
entering, 82-83 

presenting information, 
documents, 158 

preventing wrapping, text, 
126-127 

problems, fonts, 
specifying, 28-29 

programmers, costs, 176 

programs, writing, 
consistencies, 162 

proportional fonts, 
definition, 191 

public domain software 

definition, 191 
governmental, 12 


Que, documentation, other 
titles, 3 


radio buttons 
definition, 191 
features, 110 
RAM, definition, 191 
rates, servers, 176 
reference files, locating, 
URLs, 59 
relative paths 
definition, 191 
features, 58-59 
relative tags, types, 
headings, 22-23 
replacing form buttons, 
graphics, 116 
requirements 
hardware, 16-17 
software, 16-17 
reserved characters, 
features, 80-81 


RHS, 130-131 
right aligning text, 25 
routers, definition, 191 
rows, spanning, cells, 
120-121 
ROWS= 130-131, 138, 
142-143 
Rowspan arguments, 
120-121 
rules 
documents, sections, 
62-63 
inserting 
graphics, 62-63 
procedures, 62-63 
RULES= 130-131 


S 


safeguards for external 
applications, 96 
Sample tags, 22-23 
SCRIPT tags, 94-97 
scripts 
features, 94 
gateway 
definition, 7 
features, 189 
see also gateway scripts 
SCROLL, 34-35 
SCROLLAMOUNT= 34-35 
SCROLLDELAY= 34-35 
SCROLLING, 139 
scrolling lists, forms, 
114-115 
search engines, procedures, 
180-181 
search tools, automated 
indexes, 13 
searchable indexes 
definition, 191 
files, listing, 182-183 
sections, documents, rules, 
62-63 
security, financial 
transactions, 12 
selected arguments, 
114-115 
selecting 
bullets, 76-77 





lists 
check boxes, 112 
radio buttons, 110 
selection lists, forms, 
114-115 
sending, e-mail, 
browsers, 52 
servers 
commercial, 174-175 
connecting 
anonymous, 53 
anonymous FTP, 52 
costs, 176 
creating, 170-171 
designing, 172-173 
Internet, finding, 168-169 
setting 
colors 
backgrounds, 44-45 
links, 44-45 
text, 44-45 
preferences, 191 
type styles, 32-33 
set-up files, 138-139 
shareware 
definition, 192 
finding, 186-187 
sites 
ftp, browsers, 11 
WWW, definition, 192 
sizes 
fonts, changing, 26-27 
text, 26 
SLIDE, 34-35 
SMALL tags, 22-23 
software 
authoring, 188 
freeware 
definition, 189 
finding, 186-187 
public domain, 191 
requirements 
browsers, 17 
learning, 14-15 
sounds, 16 
video, 16 
requirements, options, 
16-17 
shareware, 
definition, 192 


WWW 
availability, 12 
varieties, 13 
sound boards, 
definition, 192 
sound 
adding 
backgrounds, 74 
Netscape, 98 
procedures, 86-87 
requirements 
hardware, 16-17 
software, 16-17 
source files, frames, 
defining, 138-140 
spaces, adding, 
Netscape, 39 
Spacer tags, 38-39 
spacing 
graphics, in-line, 68-69 
tables, changing, 128-129 
spanning 
columns, 120-121 
rows, 120-121 
special characters, features, 
80-81 
specifying 
colors, 28-29 
fonts, problems, 28-29 
text areas, 108 
typefaces, 28-29 
speed 
connections, balancing, 
18-19 
increasing, options, 18-19 
transmission, limiting, 
18-19 
spelling, testing, 164 
staff programmers, 
costs, 176 
START= 76-77 
stock tickers, 96 
Strong tags, 22-23 
STYLE tags, 32 
STYLE= arguments, 32 
styles 
blink, features, 30-31 
e 
fixed, 30-31 
Internet Explorer, 32 


Styling text, 28-31 

submit buttons, graphics, 
replacing, 116 

submitting, definition, 192 

supporting use maps, 
browsers, 92-93 

symbols, 80-81 


: 


T1, definition, 192 
TABLE tags, 128 
tables 
borders, changing, 
128-129 
cells, 118-119 
colors, modifying, 
132-133 
gridlines, controlling, 
130-131 
padding, changing, 
128-129 
parts, 118-119 
spacing, changing, 
128-129 
width, controlling, 
122-123 
tags 
A HREF, 46-47 
address, 22-23 
ALT, 54 
BGSOUND, 98 
BLOCKQUOTE, 60-61 
BODY, 188 
BR, 36-37 
BR Clear, 40-41 
citation, 22-23 
code, 22-23 
colors, setting, 28-29 
COLUMN, grouping, 
134-135 
definition, 192 
EMBED, 98 
fixed, 30-31 
FORM, 104 
FRAME, 136-137 
FRAMESET, 142-143 
HEAD 
definition, 189 
placing, 20 
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HR, rules, 62-63 
HTML 
browsers, 8 
definition, 20-21 
procedures, 20-21 
IMG, 64-65 
non-graphical 
browsers, 54 
video, 88-89 
IMG Align, 40-41 
input type, 104 
keyboard, 22-23 
MAP, creating, 92-93 
marquee, 34 
MULTICOL, 84-85 
NOEMBED, 98 
P, 36-37 
PRE, 82-83 
relative, types, 22-23 
spacer, procedures, 39 
style, 32 
TABLE, 128 
TD 
alignment, 124-125 
non-wrapping text, 
126-127 
TEXTAREA, 108 
TH 
alignment, 124-125 
features, 120-121 
TITLE 
definition, 192 
placing, 20 
TR 
features, 124-125 
colors, 132-133 
TARGET= 144-145 
targeting, frames, 
links, 144-145 
TD tags 
alignment, 124-125 
features, 120-121 
non-wrapping text, 
126-127 
testing 
pages, 164 
searches, 182-183 
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text 
aligning 
procedures, 24-25 
controlling, 124-125 
anchors, definition, 188 
colors, setting, 44-45 
columns, multiple, 84-85 
formatting 
custom, 82-83 
display preferences, 8 
fonts, 8 
links 
creating, 43 
definition, 190 
sizes, changing, 26-27 
wrapping, preventing, 
126-127 
text areas 
specifying, 108 
tags, 108 
text fields, 
differences, 112 
text fields 
definition, 192 
features, 106 
text areas, 
differences, 112 
text wrap, clearing, 40-41 
TH tags 
features, 120-121 
alignment, 124-125 
TITLE tags 
definition, 192 
placing, 20 
titles 
documents, 184-185 
files, 9 
TR tags 
colors, tables, 132-133 
features, 124-125 
transmission 
lines, definition, 192 
speed, limiting, 18-19 
transparent graphics 
converting, 70-71 
definition, 192 


type 
formatting, custom, 
82-83 
styles 
fixed, 30-31 
Internet Explorer, 32 
type colors, 28-29 


typefaces, specifying, 28-29 


U-V 
Uniform Resource 
Locators, see URLs 
UNIX, definition, 192 
unordered lists, 76-77 
updating documents, 
WWW, 178-179 
URLs (Uniform Resource 
Locators) 
addresses 
features, 6 
formats, 52 
complete, 58-59 
definition, 192 
host names, 
definition, 189 
reference files, 
locating, 59 
see also paths 
use maps 
features, 92-93 
image maps, differences, 
92-93 


VALUE= 96-97 
VBScript, 94-95 
VERTICAL, 38-39 
vertical lines, 130 
Video 
adding, 86-89 
boards, definition, 192 
requirements 
hardware, 16-17 
software, 16-17 
Visual Basic, 94-95 
VOID, 130-131 
VOLUME= 88-89 
VSIDES, 130-131 





W-X-Y-Z 
WAV, 74, 192 
Web servers 
commercial, 174-175 
costs, 176 
creating, 170-171 
designing, 172-173 
Web sites, finding, search 
engines, 180-181 
Web, see WWW (World 
Wide Wrb) 
WebMuseum, Paris home 
page, 12 
width 
dimensions, graphics, 
48-49 
tables, controlling, 
122-123 
WINDOWS, 86 
windows 
browsers, dividing, 
142-143 
definition, 192 
word processors, 192 
World Wide Web, see 
WWW (World Wide Web) 
WRAP= 108-109 
WRAP= Physical, 108-109 
WRAP= Virtual, 108-109 
wrapping text 
areas, 108 
preventing, 126-127 
Writing your own scripts, 
94-95 
WWW (World Wide Web) 
browsers 
definition, 188 
ftp sites, 11 
copyrights, 12 
definition, 192 
documents 
checking, 178-179 
posting, 166-167 
updating, 178-179 


Index 


financial transactions, 
caveats, 12 

indexes, 181 

legal issues, 12 

servers, 6-7 
definition, 192 
gateway scripts, 7, 189 
posts, 191 
submitting 
definition, 192 

sites, 192 

software 
availability, 12 
finding, 186-187 
varieties, 13 
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